<style scoped lang="less">
    *{
        word-wrap:break-word;
    }
    
    *[contenteditable="true"]{
        text-rendering: optimizeLegibility;
        -webkit-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
        webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }
    .a{
        width:120px;
        height:120px;
        div{
            rotate:0;
            -webkit-transform:rotate(0deg);
            font-size:12px;
        }
    }
    .vicp-preview-item{
        display:none!important;
    }
    @primary-color:#FE9333;//橘黄色默认颜色
    @black-color:#424242;//灰色背景颜色
    @black2-color:#424242;//主灰色背景颜色
    @border-color:#383838;//边框背景颜色
    @write-color:#fff;//白色默认颜色
    @font-color:#686E71;//正常字体颜色
    @txtbg-color:#F6FAF9;//输入框背景色
    .wrap{
        min-width:1200px;
        background-color: #D0D7DB;
        height: 100%;
        overflow:hidden;
    }
    //查看大图样式start
    .bigwrapbox{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        .bigwrapboxShow{
            width: 1172px;
            height: 560px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 48px;
            position: relative;
            .div{ 
                position: relative;     
                width: 780px;
                height: 560px;          
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    max-width: 100%!important;
                    max-height: 100%!important;
                    border: 6px solid #FFFFFF;
                    box-shadow: 0 0 20px 0 rgba(0,0,0,0.70);
                }
                .close{
                    position: absolute;
                    top:18px;
                    right:-75px;
                    width: 22px;
                    height: 22px;
                    background: url('../../images/fullscreen_close.png') no-repeat;
                    background-size: 100% 100%;
                    cursor: pointer;
                }
            }
            .left{
                width: 48px;
                height: 48px;
                background: url('../../images/fullscreen_bigimg_left@2x.png') no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
                margin-right: 44px;
            }
            .left:hover{
                background: url('../../images/fullscreen_bigimg_left_hover@2x.png') no-repeat;
                background-size: 100% 100%;
            }
            .right{
                width: 48px;
                height: 48px;
                background: url('../../images/fullscreen_bigimg_right@2x.png') no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
                margin-left: 44px;
            }
            .right:hover{
                background: url('../../images/fullscreen_bigimg_right_hover@2x.png') no-repeat;
                background-size: 100% 100%;
            }
            
        }
        .bigswiperwrap{
            max-width:1172px;
            height: 90px;
            position: relative;
            .imgshow{
                width:90px;
                height:90px;
                border: 1px solid #686E71;
                margin-right:16px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                img{
                    max-width:100%;
                    max-height:100%;
                }
            }
            .imgshow:hover{
                border: 1px solid #B4BDC1;
            }
            .on{
                border: 1px solid #FB9132;
            }
            .bigswiperwrapNext{
                width: 24px;
                height: 24px;
                position: absolute;
                top:33px;
                right:-20px;
                background: url('../../images/fullscreen_right_disabled@2x.png') no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }
            .bigswiperwrapPrev{
                width: 24px;
                height: 24px;
                position: absolute;
                top:33px;
                left:-40px;
                background: url('../../images/fullscreen_left_disabled@2x.png') no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }
        }
    }
    @media screen and (max-width: 1500px){
        .bigwrapbox>div{
            transform: scale(0.8)
        }
    }
    //查看大图样式end
    //内容左边显示
    .wrapLeft{
        background-color: #fff;
        box-shadow: 8px 0 8px 0 rgba(103,109,112,0.10);
        height: 100%;
        position: absolute;
        z-index: 2;
        // margin-top:60px;
        padding-top:60px;
    }
    .h3title{
        font-size:14px;
        color:#B5BDC2;
        line-height:40px;
        height:40px;
        display:block;
        width:179px;
        background:#4E5356;
        // box-sizing:content-box;
        border:1px solid #4E5356;
        position: absolute;
        top:60px;
        left:0;
        z-index:6;
        .h3titleSpan{
            padding-left:20px;
        }
        .delbtn{
            margin-right:20px;
            width: 20px;
            height: 20px;
            background: url('../../images/leftside_delete.png') no-repeat;
            background-size: 100% 100%;
            margin-top: 10px;
            float:right;           
            cursor: pointer;            
        }
        .delbtn:hover{
            background: url('../../images/leftside_delete_hover.png') no-repeat;
            background-size: 100% 100%;
        }
        .addbtn{
            margin-right:20px;
            width: 20px;
            height: 20px;
            background: url('../../images/leftside_add.png') no-repeat;
            background-size: 100% 100%;
            margin-top: 10px;
            float:right;            
            cursor: pointer;
        }
        .addbtn:hover{
            background: url('../../images/leftside_add_hover.png') no-repeat;
            background-size: 100% 100%;
        }
    }
    .replacetmpbox{
        position: absolute;
        top: 60px;
        left: 0;
        height: 60px;
        width: 179px;
        align-items: center;
        background: #686E71;
        justify-content: center;
        display: flex;
        z-index:6;
        span{
            display:block;
            line-height:36px;
            height:36px;
            width:72px;
            text-align:center;
            color:@write-color;
            background-size: 100% 100%;
            box-shadow: 3px 3px 4px 0 rgba(56,60,62,0.36);
            border-radius: 4px;
            font-size:14px;
            cursor: pointer;
        }
        .replacetmp{
            background: #4DB2EB;
        }
        .replacetmp2{
            background: #FB9132;
            margin-left:6px;            
        }
    }
    .contentleft{
        float:left;
        position: relative;
        height: 100%;
        overflow: auto;
        z-index: 5;
        background: #686E71;
        padding-top:60px;
        .contentleftdiv{
            background: @font-color;
        }
        
        .smailul{
            overflow: hidden;
            padding:0 15px;
            padding-bottom: 30px;
            li{
                width:150px;
                height:240px;
                position:relative;
                margin-bottom:20px;
                box-sizing: content-box;
                >div{
                    cursor: move;
                }
                .lidiv{
                    width:150px;
                    height:240px;
                    overflow: hidden;
                    position: absolute;
                    top:0;
                    left:0;
                    .pop{
                        position: absolute;
                        top:32px;
                        left:9px;
                        z-index: 10;
                        padding: 1px 10px;
                        background-color: #fff;
                        color:#686E71;
                        line-height: 28px;
                        border-radius: 4px;
                        font-size: 14px;
                        display:none;
                        .arrow{
                            position: absolute;
                            width: 0;
                            height: 0;
                            border-color: transparent;
                            border-style: solid;
                            top: -5px;
                            border-width: 0 5px 5px;
                            left: 18%;
                            margin-left: -5px;
                            border-bottom-color: #fff;
                        }
                    }
                }
                .lidiv:hover{
                    .pop{
                        display: block;
                    }
                }
                .topHand{
                    position:absolute;
                    top:0px;
                    left:0;
                    width: 150px;
                    height: 28px;
                    line-height: 28px;
                    background-image: linear-gradient(90deg, rgba(0,0,0,0.02) 3%, rgba(0,0,0,0.70) 97%);
                    z-index: 1;
                    span{
                        float: right;
                        margin-right: 10px;
                        font-size:14px;
                        color:#fff;
                        text-shadow: 0 2px 4px rgba(0,0,0,0.50);
                        cursor: pointer;
                    }
                }
                .pTool{
                    width:150px;
                    line-height: 26px;
                    height: 26px;
                    position:absolute;
                    bottom:0px;
                    left:0;
                    text-align:center;
                    background:rgba(0,0,0,0.6);
                    color:@write-color;
                    border:none;
                    z-index: 21;
                    cursor: pointer;
                    .p{
                        // width: 130px;
                    }
                }
                .photocontent{
                    transform: scale(0.395)!important;
                    position:absolute;
                    top: -184px;
                    left: -115px;
                    background-color: #fff;
                }
            }
            .on{
                border: 2px solid #FB9132;
            }
        }
    }
    //个人信息照片
    .baseinfobox{
        width:360px;
        background: @write-color;
        float:left;
        height: 100%;
        overflow: auto;
        // overflow-x: hidden;
        padding:20px 30px 0;
        .baseinfoboxDiv{
            width: 300px;
        }
        .baseinfo{
            margin-top:14px;
            font-size:16px;
            color:@font-color;
            .zptitle{
                float:left;
                font-size: 14px;
                color:#686E71;
                line-height: 22px;
                margin-bottom: 10px;
            }
            .topbtn{
                float:right;
                background:url('../../images/center_top.png') no-repeat;
                padding-left:30px;
            }
        }
        
      
        
    }
    .uploadbox{
            width:300px;
            height:195px;
            padding:10px;
            background: @txtbg-color;
            border:1px solid #E1E7EA;
            .workImg{
                width:130px;
                height:174px;
                float:left;
                margin-right: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                img{
                    // max-width:100%;
                    // max-height:100%;
                    width: 100%;
                }
            }
            .img{
                width:130px;
                height:174px;
                float:left;
                margin-right: 20px;
            }
            p{
                font-size:14px;
                color:@primary-color;
                border:1px solid @primary-color;
                height:30px;
                line-height:30px;
                width:80px;
                text-align:center;
                border-radius:4px;
                float:left;
                cursor: pointer;
            }
            .pop{
                float: left;
                width: 128px;
                height: 51px;
                color: #4CB2EB;
                font-size: 12px;
                line-height: 17px;
                margin-top: 53px;
                margin-bottom: 20px;
            }
        }
    .savebtnperson{
            width:150px;
            height:40px;
            line-height:40px;
            background:@primary-color;
            color:#fff;
            border:0 none;
            border-radius:4px;
            display:block;
            margin:40px auto 0;
            padding: 0;
            font-size: 16px;
            box-shadow: 4px 4px 4px 0 rgba(240,100,115,0.21);
            cursor: pointer;
        }
    .formbox{
            p{
                margin:20px 0 10px 0;
                font-size:14px;
            }
            textarea{
                resize:none;
                width:320px;
                height:220px;
                background-color: @txtbg-color;
            }
            input{
                 background-color: @txtbg-color;
            }
        }
    //墓志铭
    .mzbinfobox{
        width:360px;
        background: @write-color;
        float:left;
        height: 100%;
        overflow-y: auto;
        // overflow-x: hidden;
        padding:20px 30px;
        .mzbinfoboxDiv{
            width: 300px;
        }
        .mzbinfo{
            margin-top:14px;
            font-size:16px;
            color:@font-color;
            .zptitle{
                 float:left;
                font-size: 14px;
                color:#686E71;
                line-height: 22px;
                margin-bottom: 10px;
            }
            .topbtn{
                float:right;
                background:url('../../images/center_top.png') no-repeat;
                padding-left:30px;
            }
        }
    }
    //人生旅途
    .rsinfobox{
        width:360px;
        background: @write-color;
        float:left;
        padding:20px 30px;
        height: 100%;
        overflow: auto;
        .rsinfoboxDiv{
            width: 300px;
        }
        .rsinfo{
            margin-top:14px;
            font-size:16px;
            color:@font-color;
            display:block!important;
            .zptitle{
                 float:left;
                font-size: 14px;
                color:#686E71;
                line-height: 22px;
            }
            .topbtn{
                float:right;
                background:url('../../images/center_top.png') no-repeat;
                padding-left:30px;
            }
        }
        .rstopshow{
            width: 300px;
            height: 128px;
            background-color: @txtbg-color;
            margin-top: 20px;
            padding: 10px;
            p{
                width: 130px;
                line-height: 17px;
                font-size: 12px;
                color: #4CB2EB;
                float: left;
                margin-bottom: 10px;
            }
            .img{
                width: 130px;
                height: 108px;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                float: left;
                margin-right: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    max-width: 100%;
                    max-height: 100%;
                }
            }
            Button{
                color: @primary-color;
                border-color: @primary-color;
            }
        }
        .ulinfoNot{
            width: 300px;
            height: 212px;
            background: url('../../images/blank_photo.png') no-repeat;
            background-size: 100% 100%;
            border: 1px solid #E3E8EA;
            margin-top: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            div{
                width: 120px;
                height: 30px;
                line-height: 30px;
                border: 1px solid #FE9333;
                border-radius: 4px;
                font-size: 14px;
                color: #FE9333;
                text-align: center;
                cursor: pointer;
            }
        }
        .ulinfo{
            width: 100%;
            margin-top: 10px;
            li{
                height: 134px;
                border-bottom: 1px solid #E3E8EA;
                margin-bottom: 22px;
                .img{
                    width: 80px;
                    height: 71px;
                    padding: 6px 5px;
                    float: left;
                    background: url('../../images/journey_list_img.png') no-repeat;
                    background-size: 100% 100%;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        max-width:100%;
                        max-height: 100%;
                    }
                }
                .data{
                    float: left;
                    padding-left: 18px;
                    width: 220px;

                    .p1{
                        font-size: 14px;
                        color: #686E71;
                        line-height: 22px;
                        font-weight: bold;
                    }
                    .p2{
                        font-size: 14px;
                        height: 88px;
                        overflow: hidden;
                        margin-bottom: 9px;
                    }
                    .p3{
                        height: 20px;
                        .sj{
                            width: 75px;
                            height: 20px;
                            line-height: 20px;
                            text-align: center;
                            border:1px solid @primary-color;
                            color: @primary-color;
                            float: left;
                        }
                        .bg{
                            float: right;
                            width: 18px;
                            height: 18px;
                            background: url('../../images/journeylist_edit.png') no-repeat;
                            background-size: 100% 100%;
                            margin-right: 24px;
                            cursor: pointer;
                            .p{
                                width: 18px;
                                height: 18px;
                            }  
                        }
                        .sc{
                            float: right;
                            width: 18px;
                            height: 18px;
                             background: url('../../images/journeylist_delete.png') no-repeat;
                            background-size: 100% 100%;
                            cursor: pointer;             
                            .p{
                                width: 18px;
                                height: 18px;
                            }               
                        }
                    }
                }
            }
        }
    }
    //照片相册
    .photoinfobox{
        width:360px;
        background: @write-color;
        float:left;
        padding:20px 30px;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        .photoinfo{
            margin-top:14px;
            font-size:16px;
            color:@font-color;
            .zptitle{
                 float:left;
                font-size: 14px;
                color:#686E71;
                line-height: 22px;
                em{
                    font-style: normal;
                    color:#FE9333;
                }
            }
            .glphoto{
                 float:right;
                font-size: 14px;
                color:#FE9333;
                line-height: 22px;
                cursor:pointer;
            }
            .topbtn{
                float:right;
                background:url('../../images/center_top.png') no-repeat;
                padding-left:30px;
            }
    
            .del{
                display:inline-block;
                vertical-align: top;
                width: 20px;
                height: 20px;
                background: url('../../images/leftside_delete.png') no-repeat;
                background-size: 100% 100%; 
                cursor: pointer;   
            }
            .del:hover{
                background: url('../../images/leftside_delete_hover.png') no-repeat;
                background-size: 100% 100%;
            }
        }
        .title{
            color: #4CB2EB;
            font-size: 12px;
            line-height: 17px;
            margin-top: 4px;
        }
        //无数据样式
        .not{
            width: 320px;
            height: 228px;
            background:url('../../images/blank_photo.png') no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
            margin-top: 20px;
            .btn{
                width: 120px;
                height: 30px;
                font-size: 14px;
                line-height: 30px;
                padding: 0;
                display: block;
                margin-left: 100px;
            }
            .btn1{
               margin-top: 60px;
               margin-bottom: 20px;
            }

        }
        .have{
            width: 330px;
            margin-top: 20px;
            // overflow: hidden;
            .one{
                width: 93px;
                height: 93px;
                border: 2px dashed @primary-color;
                border-radius: 4px;
                float: left;
                margin-right: 10px;
            }
            .btn{
                width: 68px;
                height: 30px;
                border-radius: 4px;
                padding: 0;
                line-height: 30px;
                margin-left: 13px;
                color: @primary-color;
                border-color: @primary-color;
                font-size:14px;
            }
            .btn1{
                margin-top: 11px;
                margin-bottom: 6px;   
                font-size:14px;             
            }
            .info{
                width: 93px;
                height: 93px;
                border-radius: 4px;
                float: left;
                margin-right: 10px;
                margin-bottom: 10px;
                // border: 1px solid #686E71;
                background:#E3E8EA;
                // overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                .delete{
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    top:10px;
                    left:10px;
                    z-index: 3;
                    background: url('../../images/leftside_delete.png') no-repeat;
                    background-size: 100% 100%;
                    cursor: pointer;
                    display:none;
                }
                .popup{
                    position: absolute;
                    top:0;
                    left:0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0,0,0,0.6);
                    z-index: 2;
                    display:none;
                }
                .haveinfo-top-more{
                    position: absolute;
                    top:10px;
                    right:10px;
                    width: 24px;
                    height: 24px;
                    background-color: @txtbg-color;
                    border-radius: 2px;
                    z-index: 3;
                    display: none;
                    span{
                        position: absolute;
                        top:4px;
                        right:4px;
                        width: 16px;
                        height: 16px;
                        cursor:pointer;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    ul{
                        width: 69px;
                        position: absolute;
                        top:22px;
                        right: 0px;
                        background-color: @txtbg-color;
                        // text-align: justify;
                        padding: 10px 9px 6px;
                        border-bottom-left-radius: 4px;
                        border-bottom-right-radius: 4px;
                        display: none;
                        li{
                            line-height: 17px;
                            font-size: 12px;
                            color:@font-color;
                            margin-bottom: 4px;
                        }
                        li:hover{
                            color:@primary-color;
                            cursor: pointer;
                        }
                    }
                    
                }
                .haveinfo-top-more:hover ul{
                    display: block;
                }
                img{
                    max-width: 100%;
                    max-height: 100%;
                    // height: 100%;
                }
                .Chooseimg{
                    position: absolute;
                    top:0;
                    right:0;
                    width: 28px;
                    height: 28px;
                    z-index:2;
                    cursor:pointer;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .info:hover{
                .haveinfo-top-more,.popup,.delete{
                     display: block;
                }
            }
        }
       
    }
    //作品
    .zpinfobox{
        width:360px;
        background: @write-color;
        float:left;
        padding:20px 30px;
        height: 100%;
        overflow: auto;
        .zpinfoboxDiv{
            width: 300px;
        }
        .zpinfo{
            margin-top:14px;
            font-size:16px;
            color:@font-color;
            .zptitle{
                 float:left;
                font-size: 14px;
                color:#686E71;
                line-height: 22px;
                margin-bottom: 4px;
            }
            .topbtn{
                float:right;
                background:url('../../images/center_top.png') no-repeat;
                padding-left:30px;
            }
        }
        .ulinfoNot{
            width: 300px;
            height: 212px;
            background: url('../../images/blank_photo.png') no-repeat;
            background-size: 100% 100%;
            border: 1px solid #E3E8EA;
            margin-top: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            div{
                width: 120px;
                height: 30px;
                line-height: 30px;
                border: 1px solid #FE9333;
                border-radius: 4px;
                font-size: 14px;
                color: #FE9333;
                text-align: center;
                cursor: pointer;
            }
        }
        .ulinfo{
            width: 100%;
            margin-top: 10px;
            li{
                height: 129px;
                border-bottom: 1px solid #E3E8EA;
                padding-bottom: 20px;
                margin-bottom: 22px;
                .img{
                    width: 81px;
                    height: 108px;
                    padding: 6px 5.6px;
                    float: left;
                    background: url('../../images/journey_list_img.png') no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;
                    img{
                        width: 100%;
                        // height: 100%;
                    }
                }
                .data{
                    float: left;
                    padding-left: 18px;
                    width: 219px;

                    .p1{
                        font-size: 14px;
                        color: #686E71;
                        line-height: 22px;
                        font-weight: bold;
                        height: 50px;
                    }
                    .p2{
                        font-size: 12px;
                        margin: 17px 0 7px 0;
                        .sj{
                            width: 75px;
                            height: 20px;
                            line-height: 20px;
                            text-align: center;
                            border:1px solid @primary-color;
                            color: @primary-color;
                            display: inline-block;
                        }
                    }
                    .p3{
                        height: 20px;
                        .bg{
                            float: right;
                            width: 18px;
                            height: 18px;
                            background: url('../../images/journeylist_edit.png') no-repeat;
                            background-size: 100% 100%;
                            margin-right: 24px;
                            cursor: pointer;
                            .p{
                                width: 18px;
                                height: 18px;
                            }
                        }
                        .sc{
                            float: right;
                            width: 18px;
                            height: 18px;
                             background: url('../../images/journeylist_delete.png') no-repeat;
                            background-size: 100% 100%;
                            cursor: pointer;    
                            .p{
                                width: 18px;
                                height: 18px;
                            }                        
                        }
                    }
                }
            }
        }
    }
     .photoModal{
            .left{
                width: 150px;
                height: 480px;
                float: left;
                .top{
                    width: 100%;
                    height: 410px;
                    background: url(../../images/musicleft.png) no-repeat;
                    background-size: 100% 100%;
                    overflow: hidden;
                    padding-top:41px;
                    p{
                        margin-bottom:10px;                        
                    }
                    // p:nth-child(1){
                    //     margin: 41px 0 10px;
                    // }
                    p:nth-child(2){
                        margin-bottom:10px;
                    }
                    .topP{
                        font-size: 14px;
                        color: #fff;
                        height: 40px;
                        line-height: 40px;
                        background-color: @font-color;
                        cursor: pointer;           
                        img{
                            width: 20px;
                            height:20px;
                            vertical-align: middle;
                            margin:0 12px 0 32px;
                        }       
                    }
                    .on{
                        background-color: #4CB2EB;
                    }
                }
                .btn{
                    width: 100%;
                    height: 71px;
                    background: url(../../images/btn.png) no-repeat;
                    background-size: 100% 100%;
                    border-radius: 0;
                    border:0;
                    font-size: 16px;
                    color: #fff;
                    position: relative;
                    .btnHover{
                        position: absolute;
                        display: none;
                        top:-123px;
                        right: -194px;
                        width: 304px;
                        height: 114.3px;
                        background: #FFFAF5;
                        border: 1px solid #FB9132;
                        padding: 14px 14px 20px 14px;
                        font-size: 12px;
                        color: #FE9333;
                        line-height: 20px;
                        text-align: justify;
                        white-space:initial;
                        z-index: 10;
                    }

                }
                .btn:hover{
                    .btnHover{
                        display: block;
                    }
                }
                
            }
            .right{
                width: 650px;
                float: left;
                .ul{
                    background-color: @txtbg-color;
                    width: 650px;
                    height: 370px;
                    // min-height: 370px;
                    padding:20px 0px 8px 20px; 
                    overflow: auto;
                    .li{
                        width: 104px;
                        height: 104px;
                        border-radius: 4px;
                        float: left;
                        margin-right:22px;
                        margin-bottom: 10px;
                        // border: 1px solid #686E71;
                        background: #E3E8EA;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        overflow: hidden;
                        position: relative;
                        cursor: pointer;
                        .img{
                            max-height:100%;
                            max-width:100%;
                        }
                        .choose{
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            top:0;
                            left:0;
                            z-index: 2;
                        }
                        .div{
                            display: none;
                            position: absolute;
                            top:0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background-color: rgba(0,0,0, 0.6);
                            z-index:2;
                            .span{
                                width: 51px;
                                height: 30px;
                                line-height: 30px;
                                font-size: 14px;
                                text-align: center;
                                color: @primary-color;
                                border: 1px solid @primary-color;
                                display: block;
                                border-radius: 4px;
                                margin-left: 26px;
                            }
                            .del{
                                margin:15px 0 6px 26px;
                            }
                            .more{
                                position: absolute;
                                top: 5px;
                                right: 5px;
                                width: 24px;
                                height: 24px;
                                background-color: #F6FAF9;
                                border-radius: 2px;
                                z-index: 10;
                                span{
                                    position: absolute;
                                    top: 4px;
                                    right: 4px;
                                    width: 16px;
                                    height: 16px;
                                    cursor: pointer;   
                                    img{width: 100%;height: 100%;}
                                }
                                ul{
                                    width: 69px;
                                    position: absolute;
                                    top: 22px;
                                    right: 0px;
                                    background-color: #F6FAF9;
                                    padding: 10px 9px 6px;
                                    display: none;
                                    li{
                                        line-height: 17px;
                                        font-size: 12px;
                                        color: #686E71;
                                        margin-bottom: 4px;
                                        cursor: pointer;
                                    }
                                    li:hover{
                                        color:@primary-color;
                                    }
                                }
                            }
                            .more:hover{
                                ul{
                                    display: block;
                                }
                            }
                        }
                    }
                    .li:nth-child(5n){
                        margin-right: 0;
                    }
                    .lion{
                        border:0;
                    }
                    .li:hover div{                        
                        display: block;
                    }
                }
                .videoul{
                    background-color: @txtbg-color;
                    width: 650px;
                    height: 370px;
                    padding:20px 0px 20px 20px; 
                    overflow: auto;
                    li{
                        width: 145px;
                        height: 93px;
                        border-radius: 4px;
                        float: left;
                        margin-right: 8px;
                        margin-bottom: 10px;
                        border: 1px solid #686E71;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        overflow: hidden;
                        position: relative;
                        cursor: pointer;
                        img{
                            height: 100%;
                        }
                        .choose{
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            top:0;
                            left:0;
                            z-index: 2;
                        }
                        div.nocircle,.nocircle2{
                            display: none;
                            position: absolute;
                            top:0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background-color: rgba(0,0,0, 0.6);
                            z-index: 3;
                            span{
                                width: 51px;
                                height: 30px;
                                line-height: 30px;
                                font-size: 14px;
                                text-align: center;
                                color: @primary-color;
                                border: 1px solid @primary-color;
                                display: block;
                                border-radius: 4px;
                                margin-left: 51px;
                            }
                            span:nth-child(1){
                                margin:15px 0 6px 51px;
                            }
                        }
                        .nocircle2{
                            display: block;                           
                        }
                    }
                    .lion{
                        border:0;
                    }
                    li:hover .nocircle{                        
                        display: block;
                    }
                }
               
                .title{
                    width: 100%;
                    height: 40px;
                    background-color: #E3E8EA;
                    line-height: 40px;
                    font-size: 14px;
                    position: relative;
                    padding: 0 41px 0 30px;
                    .on{
                        color:#FE9333;
                    }
                    span{
                        margin-right: 8px;
                        cursor: pointer;
                    }
                    .input{
                        width: 200px;
                        height: 30px;
                        position: absolute;
                        right:14px;
                        top:0px;                  
                    }
                    .btn{
                        position: absolute;
                        right:14px;
                        top:6px;
                        height: 28px;
                        width: 30px;
                        background:url('../../images/edit_search.png') no-repeat;
                        background-size:100% 100%;
                        cursor:pointer;
                    }
                    //我的上传管理title
                    .manage{
                        float: right;
                        cursor: pointer;
                        img{
                            width:16px;
                            height: 16px;
                            vertical-align: sub;
                            margin-right: 6px;
                        }
                    }
                    .cancelManage{
                        i{
                            font-style: normal;
                            color:#4CB2EB;
                        }
                        .ivu-checkbox-wrapper{//图片素材管理全选Check样式修改
                            margin-right: 0;
                            vertical-align: bottom;
                        }
                        .bnt3{
                            margin: 0;
                            float: right;
                            width: 80px;
                            height: 30px;
                            line-height: 30px;
                            background: #4CB2EB;
                            border-radius: 4px;
                            margin-top: 5px;
                            text-align: center;
                            color:#fff;
                        }
                    }
                }
                .notData{
                    width: 650px;
                    height: 370px;
                    background-image: linear-gradient(-180deg, rgba(254,202,51,0.20) 3%, rgba(255,255,255,0.10) 100%);
                    text-align: center;
                    img{
                        width:400px;
                        height: 172px;
                        margin: 100px 0 36px 0;
                    }
                    p{
                        font-size: 16px;
                        color: #FE9333;
                        font-weight: bold;
                    }
                }
            }
        }
    //手机模型
    .photoboxwarp{
        // margin-left: 231px;
        // margin-top: 50px;
        margin:  50px auto;
        width:432px;
        position:relative;
        .photobox{
            background:url('../../images/phone.png') no-repeat;
            background-size: 100% 100%;
            width:432px;
            height:780px;
            -webkit-transform: scale(0.8);
            -moz-transform: scale(0.8);
            -ms-transform: scale(0.8);
            -o-transform: scale(0.8);
            transform: scale(0.8);
            position: absolute;
            z-index: 1;
        }
        .showDom{
            display:none!important;
        }
        .photoboxLeft{
            position:absolute;
            left: 3px;
            top:175px;
            width: 40px;
            div{
                width: 5px;
                padding: 18px 26px 22px 14px;
                background: #F6FAF9;
                color:#686E71;
                cursor: pointer;
            }
            div.on{
                color: #fff;
                background: #F16473;
            }
            
        }
    }
    .photoboxRight{
        width: 40px;
        height: 442px;
        background-color: rgba(0,0,0,0.6);
        padding: 34px 6px;
        position: absolute;
        top:135px;
        right: -20px;
        z-index:0;
        p{
            width: 28px;
            height: 28px;
            cursor: pointer;
            border-radius: 2px;
        }
        .p7toop{
            margin-top: 40px;
        }
        .p1{
            background: url('../../images/operating_revoked.png') no-repeat;
            background-size: 100% 100%;
        }
        .p1:hover{
            background: url('../../images/operating_revoked_hover.png') no-repeat  #686E71;
            background-size: 100% 100%;
        }
        .p2{
            background: url('../../images/operating_redo.png') no-repeat;
            background-size: 100% 100%;
        }
        .p2:hover{
            background: url('../../images/operating_redo_hover.png') no-repeat  #686E71;
            background-size: 100% 100%;
        }
        .p3{
            background: url('../../images/operating_preview.png') no-repeat;
            background-size: 100% 100%;
            position:relative;
            .span{
                position: absolute;
                top:40px;
                right: -180px;
                background: #FFFFFF;
                box-shadow: 0 0 4px 0 rgba(0,0,0,0.23);
                width: 152px;
                height: 182px;
                z-index: 11;
                padding: 10px;
                img{
                    width: 132px;
                    height: 132px;
                }
                span{
                    line-height: 22px;
                    height: 22px;
                    font-size: 14px;
                    color: #686E71;
                    display: block;
                    text-align: center;
                    margin-top: 6px;
                }
            }
        }
        .p3:hover{
            background: url('../../images/operating_preview_hover.png') no-repeat  #686E71;
            background-size: 100% 100%;
        }
        .p4{
            background: url('../../images/operating_sticktop.png') no-repeat;
            background-size: 100% 100%;
        }
        .p4:hover{
            background: url('../../images/operating_sticktop_hover.png') no-repeat  #686E71;
            background-size: 100% 100%;
        }
        .p5{
            background: url('../../images/operating_aligned.png') no-repeat;
            background-size: 100% 100%;
        }
        .p5:hover{
            background: url('../../images/operating_aligned_hover.png') no-repeat  #686E71;
            background-size: 100% 100%;
        }
        .p6{
            background: url('../../images/operating_delete.png') no-repeat;
            background-size: 100% 100%;
        }
        .p6:hover{
            background: url('../../images/operating_delete_hover.png') no-repeat  #686E71;
            background-size: 100% 100%;
        }
        .p7{
            background: url('../../images/operating_music.png') no-repeat;
            background-size: 100% 100%;
        }
        .p7:hover{
            background: url('../../images/operating_music_hover.png') no-repeat  #686E71;
            background-size: 100% 100%;
        }
        .p7Set{
            background: url('../../images/operating_music_selected.png') no-repeat;
            background-size: 100% 100%;
        }
        .p7Set:hover{
            background: url('../../images/operating_music_selected_hover.png') no-repeat #686E71;
            background-size: 100% 100%;
        }
        .p8{
            background: url('../../images/operating_background.png') no-repeat;
            background-size: 100% 100%;
        }
        .p8:hover{
            background: url('../../images/operating_background_hover.png') no-repeat  #686E71;
            background-size: 100% 100%;
        }
        .p9{
            background: url('../../images/operating_saved.png') no-repeat;
            background-size: 100% 100%;
        }
        .p9:hover{
            background: url('../../images/operating_saved_hover.png') no-repeat  #686E71;
            background-size: 100% 100%;
        }
        .p10{
            background: url('../../images/operating_rotate.png') no-repeat;
            background-size: 100% 100%;
        }
        .p10:hover{
            background: url('../../images/operating_rotate_hover.png') no-repeat  #686E71;
            background-size: 100% 100%;
        }
        .p1Not{
            background: url('../../images/operating_revoked_disabled.png') no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
            margin-bottom: 10px;
        }
        .p2Not{
            background: url('../../images/operating_redo_disabled.png') no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
            margin-bottom: 10px;
        }
        .p4Not{
            background: url('../../images/operating_sticktop_disabled.png') no-repeat  ;
            background-size: 100% 100%;
            cursor: pointer;
            margin-bottom: 10px;
        }
        .p5Not{
            background: url('../../images/operating_aligned_disabled.png') no-repeat  ;
            background-size: 100% 100%;
            cursor: pointer;
            margin-bottom: 10px;
        }
        .p10Not{
            background: url('../../images/operating_rotate_disabled.png') no-repeat  ;
            background-size: 100% 100%;
            cursor: pointer;
            margin-bottom: 10px;
        }
        .p6Not{
            background: url('../../images/operating_delete_disabled.png') no-repeat  ;
            background-size: 100% 100%;
            cursor: pointer;
            margin-bottom: 10px;
        }
        .p8Not{
            background: url('../../images/operating_background_disabled.png') no-repeat  ;
            background-size: 100% 100%;
            cursor: pointer;
            margin-bottom: 10px;
        }
    }
    .photocontent{
            width:380px;
            height:608px;
            position:absolute;
            top:121px;
            left:26.5px;
            color:#fff;
            overflow:hidden;
            .title{
                position:absolute;
                top:30px;
                left:0;
                text-align: center;
                width:100%;
                -webkit-user-modify: read-write-plaintext-only;
                font-size: 24px;
            }
            .time{
                position:absolute;
                top:65px;
                left:0;
                width:100%;
                text-align: center;
                -webkit-user-modify: read-write-plaintext-only;
                font-size:12px;
            }
            .content{
                position:absolute;
                top:100px;
                width:100%;
                left:0;
                text-align: center;
                -webkit-user-modify: read-write-plaintext-only;
                font-size:14px;
            }
        }
        .newModule{//新模块
            position: absolute;
            top: 100px;
            left:-400px;
            z-index: 4;
            width: 400px;
            // height: 712px;
            height: 600px;
            background-color: @txtbg-color;
            border: 1px solid #E3E8EA;
            padding:  20px 25px 20px 20px;
            transition: all 1s;
            display: none;
            .close{
                position: absolute;
                top:3px;
                right: 8px;
                width: 18px;
                height: 18px;
                cursor: pointer;
                background: url(../../images/close.png) no-repeat;
                background-size: 100% 100%;
                
            }
            .select{
                width: 173px;
                height: 36px;
                line-height: 36px;              
            }
            .select2{
                margin-left: 3px
            }
            .input{
                width: 100%;
                height: 36px;
                position: relative;
                margin-top: 10px;
                img{
                    position: absolute;
                    top:0;
                    right:0;
                    cursor:pointer;
                }
            }
            .info{
                overflow: auto;
                margin-top: 10px;
                width: 377px;
                height: 467px;
                .moduleHtmlWarp{
                    width: 112px;
                    height: 202px;
                    float: left;
                    margin-right: 10px;
                    border: 1px solid #CDD3D6;
                    margin-bottom: 11px;
                    box-shadow: 2px 2px 4px 0 rgba(204,210,213,0.37);
                    position: relative;
                    .p{
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 100%;
                        background-color: #fff;
                        color:@font-color;
                        font-size: 12px;
                        text-align: center;
                        height: 18px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
                .moduleHtmlWarp:nth-child(3n){
                    margin-right: 0px;
                }

                .photocontent{
                    transform: scale(0.29)!important;
                    position:absolute;
                     top: -216px;
                    left: -135px;
                    background-color: #fff;
                }
            }
            .notInfo{
                text-align:center;
                overflow: hidden;
                img{
                    margin-top:140px;
                    width:120px;
                    height:120px;
                }
                p{
                    font-size: 14px;
                    color: #686E71;
                    line-height: 22px;
                    margin-top:20px;
                }
            }
            .mbul{//模板列表
                overflow: auto;
                margin-top: 10px;
                width: 377px;
                height: 523px;
                li{
                    width: 112px;
                    height: 202px;
                    float: left;
                    margin-right: 10px;
                    border: 1px solid #CDD3D6;
                    margin-bottom: 11px;
                    box-shadow: 2px 2px 4px 0 rgba(204,210,213,0.37);
                    .img{
                        width: 100%;
                        height: 176px;
                        position:relative;
                        cursor: pointer;
                        .showdiv{
                            position: absolute;
                            top: -216px;
                            left: -135.5px;

                        }
                    }
                    .div{
                        color:@font-color;
                        font-size: 12px;           
                        overflow: hidden;            
                        p{
                        width: 86px;
                        white-space:nowrap;
                        text-overflow:ellipsis;
                        overflow:hidden;
                        display: inline-block;
                        text-indent: 8px;
                        }
                        span{
                            display: inline-block;
                            width: 12px;
                            height: 12px;
                            vertical-align: super;
                            margin-left: 7px;
                            cursor: pointer;
                            
                        }
                        .sc{
                            background: url(../../images/collection_after.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        .wsc{
                             background: url(../../images/collection_before.png) no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }
                li:nth-child(3n){
                    margin-right: 0px;
                }
            }
            .mbtitle{
                span{
                    font-size: 14px;
                    margin-right: 20px;
                    cursor: pointer;
                }
                .on{
                    color: #FE9333;
                    border-bottom: 2px solid #FE9333;
                    padding-bottom: 4px;
                }
                a{
                    float: right;
                }
            }
            
        }
        .newModuleOpen{
            left:180px;
            display: block;
        }

        .findafter{
            .findafter-div{
                height: 400px;
                text-align: center;
                font-size: 14px;
                color: @font-color;
                img{
                    width: 110px;
                    height: 110px;
                    margin-top: 90px;
                }
                .success{
                    font-size: 30px;
                    color: #4CB2EB;
                    margin: 30px 0 10px;
                }
                .error{
                    color: #F16473;
                }

            }
            
        }
        // 设置文本组件样式
        .setText{
            position: absolute;
            height: 46px;
            background: #FFFFFF;
            box-shadow: 0 0 4px 0 rgba(0,0,0,0.23);
            padding: 6px 0px 6px 10px;
            min-width: 748px;
            z-index: 1;
            transform: scale(1.25);
            .fontFamliy{
                background-color: #F6FAF9;
                width: 150px;
                height: 34px;
                margin-right: 6px;
                border: 1px solid #d7dde4;
                background-color: #F6FAF9;
                border-radius: 4px;
            }
            .fontszie{
                width: 70px;
                height: 34px;
                margin-right:10px;            
                border: 1px solid #d7dde4;    
                background-color: #F6FAF9;
                border-radius: 4px;
            }
            .fontszie:hover,.fontFamliy:hover,.fontszie:focus,.fontFamliy:focus{
                border-color: #e9edee;
                outline:none;
            }
            .colorChoose{
                width: 50px;
                height: 28px;
                padding: 0 10px;
                border-left: 1px solid #E3E8EA;
                display: inline-block;
                vertical-align: middle;
                img{
                    width: 28px;
                    height: 28px;
                }
            }
            .style{
                height: 28px;
                padding: 0 4px 0 7px;
                border-left: 1px solid #E3E8EA;
                
                display: inline-block;
                vertical-align: middle;
                span{
                    width: 28px;
                    height: 28px;
                    display: inline-block;
                    margin-right: 6px;
                    cursor: pointer;
                }
                .blod{
                    background: url('../../images/edit_bold.png') no-repeat;
                    background-size: 100% 100%;
                }
                .blodon{

                }
                .qx{
                    background: url('../../images/edit_tilt.png') no-repeat;
                    background-size: 100% 100%;
                }
                .xhx{
                    background: url('../../images/edit_underline.png') no-repeat;
                    background-size: 100% 100%;
                }
                .scx{
                     background: url('../../images/edit_removeline.png') no-repeat;
                    background-size: 100% 100%;
                }
                .clear{
                     background: url('../../images/edit_clear.png') no-repeat;
                    background-size: 100% 100%;
                }
                .center,.lineheight,.lear{
                    width: 64px;
                    height: 34px;
                    // border: 1px solid #E3E8EA;
                    border-radius: 4px;
                    margin-top: -3px;
                    background-color: #F6FAF9;
                    position: relative;
                    .img{
                        position: absolute;
                        left:0px;
                        top:0px;
                        width: 64px;
                        height: 34px;
                    }
                    .ul1{
                         position: absolute;
                         top:36px;
                         left:-18px;
                         font-size: 14px;
                         background-color: #F6FAF9;
                         border: 1px solid #E3E8EA;
                         color:#686E71;
                         width: 100px;
                         border-radius: 4px;
                        li{
                            img{
                                width: 28px;
                                height: 28px;
                                vertical-align: middle;
                                margin-left: 8px;
                                margin-right: 4px;
                            }
                            line-height: 35px;
                            height: 35px;
                        }
                    }
                    .ul2,.ul3{
                         position: absolute;
                         top:36px;
                         left:0px;
                         font-size: 14px;
                         background-color: #F6FAF9;
                         border: 1px solid #E3E8EA;
                         color:#686E71;
                         width: 64px;
                         border-radius: 4px;
                         li{
                             line-height: 34px;
                             height: 34px;
                             padding: 0 10px;
                             input{
                                 width: 58px;
                                 height: 26px;
                                 margin-left: -8px;
                                 border: 1px solid #E3E8EA;
                             }
                         }
                         li:hover{
                             background-color: #FB9132;
                         }
                    }

                    
                }
            }

        }
        .iconModule{
            position: absolute;
            left: 20px;
            top:60px;
            width: 290px;
            height: 530px;
            background-color: #F6FAF9;
            color: #686E71;
            z-index:4;
            .title{
                height: 50px;
                line-height: 50px;
                font-size: 16px;
                font-weight: bold;
                border-bottom: 1px solid #B5BDC2;
                background-color: #F5F8F9;
                padding-left: 26px;
                span{
                    float: right;
                    margin-top: 17px;
                    margin-right: 16px;
                    width: 18px;
                    height: 18px;
                    background:url('../../images/close.png') no-repeat;
                    background-size: 100% 100%;
                    cursor: pointer;
                }
            }
            .content{
                height: 480px;
                overflow: auto;
                padding: 30px 0px 29px 30px;
                div{
                    float: left;
                    width: 50px;
                    height: 50px;
                    background: url('../../images/ahpha_bg.png') repeat;
                    border-radius: 4px;
                    margin: 0 10px 10px 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        width: 40px;
                        height: 40px;
                    }
                }
            }
        }
       
        //视频
        .videoClow1{//一行2个
            .div{
                font-size: 13px;
                width: 185px;
                div{
                    width: 185px;
                    height: 116px;
                    margin-bottom: 8px;
                     display: flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        height: 100%;
                    }
                }
                p{
                    line-height: 16px;
                    padding: 0 7px;
                }
                margin-bottom: 10px;
            }
            .div:nth-child(odd){
                margin-right: 7px;
            }
        }
        .videoClow2{//一行2个
            .div{
                font-size: 13px;
                div{
                    width: 122px;
                    height: 77px;
                    margin-bottom: 8px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        height: 100%;
                    }
                }
                p{
                    line-height: 16px;
                    padding: 0 7px;
                }
                margin-bottom: 20px;
            }
            .div:nth-child(3n+1){
                margin: 0 6px;
            }
        }

.fielname{
    position: absolute;
    width: 100%;
    line-height:22px;
    height: 22px;
    bottom:0;
    left:0;
    padding: 0 6px;
    color:#fff;
    background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.52) 48%, rgba(0,0,0,0.64) 100%);
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    z-index:1;
}
//操作框样式
.handleDiv{
    // margin: 20px 0 14px 0;
    height: 30px;
    line-height: 22px;
    font-size: 14px;
    color: #686E71;
    border-bottom: 1px solid #E3E8EA;
    .div{
        cursor: pointer;
        float: right;
        margin-left: 12px;
        .img{
            float: left;
            width: 20px;
            height: 20px;
            margin-right: 6px;
            margin-top: 1px;           
        }
        .img1{
            background: url('../../images/leftside_add.png') no-repeat;
            background-size: 100% 100%;
        }
        .img2{
            background: url('../../images/leftside_delete.png') no-repeat;
            background-size: 100% 100%;
        }
    }
    .div1:hover{
        color:#FB9132;
        .img1{
            background: url('../../images/leftside_add_hover.png') no-repeat;
            background-size: 100% 100%;
        }
    }
    .div2:hover{
        color:#FB9132;        
        .img2{
            background: url('../../images/leftside_delete_hover.png') no-repeat;
            background-size: 100% 100%;
        }
    }
}
//修改模块名称
.changeModoClass{
    .div{
        padding:30px;
        border-bottom:1px solid #E3E8EA;
        input{
            width:320px;
            height: 40px;
            line-height:40px;
        }
    }
    .submit{
        float: right;
        padding:8px 36px;
        background: #FE9333;
        border-radius: 4px;
        color:#fff;
        cursor: pointer;
    }
    .cancel{
        float: right;
        font-size: 14px;
        color: #686E71;
        margin-right: 30px;
        padding:8px 0;
        cursor: pointer;
    }

}
/*
    作品编辑弹窗样式 start
*/
.editWorksPop{
    position: absolute;
    width: 100%;
    min-height: 100%;
    height:auto;
    min-width: 1100px;
    top:0;
    left: 0;
    background-color: #F6FAF9;    
    padding: 10px;
    z-index: 20;
    //overflow: auto;
    .title{
        height: 52px;
        border: 1px solid #E3E8EA;
        background-color: #fff;
        .left{
            float: left; 
            margin: 14px 0 0 30px;
            font-size: 14px;
            color: #686E71;
            line-height: 22px;
            cursor: pointer;
            img{
                width: 20px;
                height: 20px;
                vertical-align: top;
                margin-right: 4px;
            }       
        }
        .right{
            float: right;
            margin-right: 30px;
            font-size: 0;
            span{
                display: inline-block;
                margin-top: 7px;
                padding:8px 36px;
                border-radius: 4px;
                font-size: 14px;
                color: #FFFFFF;
                cursor: pointer;
            }
            .s1{
                background: #4CB2EB;
                margin-right: 20px;
            }
            .s2{
                background: #FE9333;
            }
            .s3{
                background: rgba(42,42,42,0.4);
            }
        }
    }
    .middle{
        border: 1px solid #E3E8EA;
        background-color: #fff;
        border-top:0;
        padding:19px 30px 20px 30px;
        .d1{
            margin-bottom: 20px;
            z-index: 1000;
            position: relative;
            .name{
                display: inline-block;
                position: relative;
                p{
                    position:absolute;
                    top: 0;
                    right: 46px;
                    span{
                        margin:0;
                        font-size:12px;
                    }
                }
            }
            span{
                margin-right: 20px;
                font-size: 14px;
                color: #686E71;
                line-height: 36px;
            }
        }
        .d2{
            margin-bottom: 20px;
            span{
                margin-right: 20px;
                font-size: 14px;
                color: #686E71;
                line-height: 22px;
                float: left;
            }
            .img{
                float: left;
                width: 100px;
                height: 134px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 20px;
                img{
                    max-width: 100%;
                    max-height: 100%;
                }
            }
            .handle{
                margin-top: 46px;
                float: left;
                p{
                    font-size: 12px;
                    color: #4DB2EB;
                    margin-bottom: 10px;
                }
                div{
                    width: 80px;
                    height: 30px;
                    line-height: 30px;
                    border: 1px solid #FE9333;
                    border-radius: 4px;
                    font-size: 14px;
                    color: #FE9333;
                    text-align: center;
                    cursor: pointer;
                }
            }
        }
    }

}
/*
    作品编辑弹窗样式 end
*/
/*
    人生旅途编辑弹窗样式 start
*/
.editTripPop{ 
    .content{
       padding:  20px 30px 18px 30px;
       .d1{
           width: 300px;
           height: 128px;
           padding:10px;           
           background: #F6FAF9;
           border: 1px solid #E3E8EA;
           margin-bottom: 10px;
           .img{
               float: left;
               width: 130px;
               height: 108px;
               display: flex;
               justify-content: center;
               align-items: center;
               margin-right: 18px;
               img{
                   max-width: 100%;
                   max-height: 100%;
               }
           }
           .handle{
               width: 130px;
               float: left;
               p{
                    font-size: 12px;
                    color: #4DB2EB;
                    margin-bottom: 7px;
               }
               div{
                    width: 80px;
                    height:30px;
                    line-height: 30px;
                    font-size: 14px;
                    color: #FE9333;
                    border: 1px solid #FE9333;
                    border-radius: 4px;
                    text-align: center;
                    cursor: pointer;
               }
           }
       }
       .d2{
           p{
                font-size: 14px;
                color: #686E71;
                line-height: 22px;
                margin-bottom: 10px;
           }
           .d2d{
               margin-bottom: 10px;
           }
           textarea{
                padding: 12px;
                width: 300px;
                height: 190px;
                background: #F6FAF9;
                border: 1px solid #E3E8EA;
                resize: none;
           }
       }
    }
    .footer{
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
        .submit{
            width: 130px;
            height:36px;
            line-height: 36px;
            background-color: #FE9333;
            color:#fff;
            text-align: center;
            font-size: 14px;
            border-radius: 4px;
            cursor: pointer;
        }
    }
    
}
/*
    人生旅途编辑弹窗样式 end
*/
/* 作品预览弹窗样式 start*/
.workPreview{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 30;
    display: flex;
    justify-content: center;
    align-items: center;
    .data{
        position: relative;
        width: 346px;
        height: 624px;
        background: url('../../images/release_phonecopy.png') no-repeat;
        background-size: 100% 100%;
        .close{
            position: absolute;
            width: 22px;
            height: 22px;
            right:-30px;
            top:40px;
            background: url('../../images/fullscreen_close.png') no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }
        .con{
            margin-left: 22px;
            margin-top: 96px;
            width:303px;
            height: 486px;
            overflow: auto;
            background: #fff;
            padding: 20px;            
            .title{
                text-align: left;
                color: black;
                font-weight: bold;
                font-size: 20px;
                margin-bottom: 20px;
            }
            .time{
                font-size: 13px;
                color: #9A9A9A;
            }
            .conDiv{
            }      
        }

    }
}
/* 作品预览弹窗样式 end*/
//拖拽样式
.item1 { 
  width: 405px; 
  height: 291px; 
  cursor: move; 
  position: absolute; 
  top: 30px; 
  left: 30px; 
  background-color: #FFF; 
  border: 1px solid #CCCCCC; 
  -webkit-box-shadow: 10px 10px 25px #ccc; 
  -moz-box-shadow: 10px 10px 25px #ccc; 
  box-shadow: 10px 10px 25px #ccc; 
 } 
  
 .item2 { 
  width: 200px; 
  height: 100px; 
  cursor: move; 
  position: absolute; 
  top: 400px; 
  left: 100px; 
  background-color: #FFF; 
  border: 1px solid #CCCCCC; 
  -webkit-box-shadow: 10px 10px 25px #ccc; 
  -moz-box-shadow: 10px 10px 25px #ccc; 
  box-shadow: 10px 10px 25px #ccc; 
  line-height: 100px; 
  text-align: center; 
 } 
</style>
<style lang="less">
@primary-color:#FE9333;//橘黄色默认颜色
@black-color:#424242;//灰色背景颜色
@black2-color:#424242;//主灰色背景颜色
@border-color:#383838;//边框背景颜色
@write-color:#fff;//白色默认颜色
@font-color:#686E71;//正常字体颜色
@txtbg-color:#F6FAF9;//输入框背景色
.ivu-modal-header{
		padding: 0 16px;
		.ivu-modal-header-inner{
			height: 40px;
			line-height: 40px;
			font-size: 14px;
			color: #686E71;
		}
	}
.ivu-modal-close{
    top:4px;
}
.uploadbox .g-core-image-corp-container{
    width:600px;
    height:600px;
}
.smailul .ivu-tooltip-rel{
     display:block;
}
.mzbinfobox{
    textarea{
        width:320px;
        height: 222px;
        resize: none;
        background-color: #F6FAF9;
    }
}
.ivu-upload-select{
    display:block
}     
.textbox{
    width:280px;
    height:560px;
    position: absolute;
    z-index:4;
    top:63px;
    left:560px;
    background:#FFFFFF;
    h5{
        color: #B5BDC2;
        background:@font-color;
        padding-left:22px;
        height:30px;
        line-height: 30px;
        font-size: 14px;
        font-weight: normal;
        span{
            float:right;
            margin-right:12px;
            background:url('../../images/assembly_close.png') no-repeat;
        }
    }
    .ivu-tabs-nav-wrap{
        background:#B5BDC2;
        padding-left:10px;
        height:35px;
        .ivu-tabs-nav .ivu-tabs-tab{
            background:#B5BDC2;
            margin-top:4px;
            text-align: center;
            border-radius: 0px;
            border:none;
            width:82px;
            height:28px;
            line-height: 28px;
            color: #fff;
            padding:0;
        }
        .ivu-tabs-nav .ivu-tabs-tab-active{
            background:#fff;
            color: @font-color;
            
        }
    }
    .ivu-tabs-bar{
        margin-bottom:15px;
    }
    .ivu-collapse-item{
        margin-top:2px;
        background:@txtbg-color;
        
    }
    .ivu-collapse-item .ivu-collapse-header{
        padding-left:21px;
        .ivu-icon{
            margin-top:12px;
            margin-right:20px;
            float:right;
            color: #B5BDC2;
        }
    }
    .ivu-collapse{
        border:0 none;
        background:#fff;
        .ivu-collapse-item{
            border:0 none;
        }
        
    }
    .ivu-slider-wrap{
        height:20px;
        .ivu-slider-bar{
            height:20px;
        }
        .ivu-tooltip-rel{
            margin-top:7px;
        }
    }
    
    
}

    .photoModal{       
        .ivu-modal-footer{
            display: none;
        }
        .ivu-modal-body{
            padding: 0;
            overflow: hidden;
        }
        .ivu-input{
            height: 30px;
        }
       .bottom{
			border-top: 1px solid #E3E8EA;
			padding: 12px 18px 12px 18px;
			text-align: right;
			.cancel{
				font-size: 14px;				
			}
			.ok{
				padding: 8px 43px;
				font-size: 16px;
			}
		}
    }
    .formbox{
        .ivu-input-icon-normal + .ivu-input{
            background-color: @txtbg-color;
        }
    }
    // 照片编辑弹窗
    .photoInfoEdit{
      
        .ivu-modal-footer{
            display: none;
        }
        .ivu-modal-body{
            padding: 0;
        }
        .left{
            width: 232px;
            height: 263px;
            float: left;
            padding-top: 31px;
            // display: flex;
            // justify-content: center;

            .img{
                width: 130px;
                height: 90px;
                margin-left:50px;
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                   max-width: 100%;
                   max-height: 100%; 
                }
            }
            .ivu-btn{
                margin-top: 20px;
                margin-left: 75px;
            }
        }
        .right{
            float: left;
            width: 368px;
            height: 263px;
            .ivu-form{
             padding: 31px 50px 27px 0;                
                textarea.ivu-input{
                    height: 90px;
                }
            }
        }
        .ivu-form{
            padding: 31px 50px 27px 50px;
            .successP1{
                height:37px;
                line-height:37px;
                font-size: 26px;
                color: #4DB2EB;
                margin-bottom:10px;
            }
            .successP2{
                font-size: 14px;
                color: #686E71;
                line-height: 22px;
                margin-bottom:30px;
                
            }
            textarea.ivu-input{
                resize: none;
            }
            .ivu-form-item{
                margin-bottom: 20px;
            }
            .f1{
                .ivu-input-wrapper{
                    line-height: 46px;
                    height: 46px;
                    .ivu-input{
                        line-height: 46px;
                        height: 46px;
                    }
                }
               
            }
            .f2{
                .ivu-input-wrapper{
                    height: 72px;
                    .ivu-input{
                        height: 72px;
                    }
                }
            }
         
            .ivu-form-item-label{
                font-size: 14px;
            }
        }
        .bottom{
            height: 56px;
            border-top: 1px solid #E3E8EA;
            .cancel{
                float: right;
                font-size: 14px;
                color: #686E71;
                padding: 0;
                height: 40px;
                line-height: 40px;                
                margin-right: 40px;
                margin-top: 10px;                
            } 
            .ok{
                float: right;
                padding: 0;
                width: 100px;
                height: 36px;
                line-height: 36px;  
                margin-right: 10px;
                margin-top: 10px;
                font-size: 16px;
            }
        }
    }
    .videobox{
        width:360px;
        background: @write-color;
        float:left;
        padding:20px  30px;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        .photoinfo{
            margin-top:14px;
            font-size:16px;
            color:@font-color;
            .zptitle{
                 float:left;
                font-size: 14px;
                color:#686E71;
                line-height: 22px;
                em{
                    font-style: normal;
                    color:#FE9333;
                }
            }
            .glphoto{
                 float:right;
                font-size: 14px;
                color:#FE9333;
                line-height: 22px;
                cursor:pointer;
            }
            .topbtn{
                float:right;
                background:url('../../images/center_top.png') no-repeat;
                padding-left:30px;
            }
    
            .del{
                display:inline-block;
                vertical-align: top;
                width: 20px;
                height: 20px;
                background: url('../../images/leftside_delete.png') no-repeat;
                background-size: 100% 100%; 
                cursor: pointer;   
            }
            .del:hover{
                background: url('../../images/leftside_delete_hover.png') no-repeat;
                background-size: 100% 100%;
            }
        }
        .title{
            color: #4CB2EB;
            font-size: 12px;
            line-height: 17px;
            margin-top: 4px;
        }
        //无数据样式
        .not{
            width: 320px;
            height: 228px;
            background:url('../../images/blank_photo.png') no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
            margin-top: 20px;
            .btn{
                width: 120px;
                height: 30px;
                font-size: 14px;
                line-height: 30px;
                padding: 0;
                display: block;
                margin-left: 100px;

            }
            .btn1{
               margin-top: 60px;
               margin-bottom: 20px;
               font-size: 14px;
               
            }
            .__upload__{
                    input{
                        cursor: pointer;
                    }
                }
        }
        .have{
            width: 330px;
            margin-top: 20px;
            overflow: hidden;
            .one{
                width: 145px;
                height: 91px;
                border: 2px dashed @primary-color;
                border-radius: 4px;
                float: left;
                margin-right: 10px;
                .__upload__{
                    input{
                        cursor: pointer;
                    }
                }
            }
            .btn{
                width: 68px;
                height: 30px;
                border-radius: 4px;
                padding: 0;
                line-height: 30px;
                margin-left: 38px;
                color: @primary-color;
                border-color: @primary-color;
                font-size: 14px;
            }
            .btn1{
                margin-top: 11px;
                margin-bottom: 6px;        
                font-size: 14px;         
            }
            .info{
                width: 145px;
                height: 91px;
                border-radius: 4px;
                float: left;
                margin-right: 10px;
                margin-bottom: 10px;
                border: 1px solid #686E71;
                // overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                .haveinfo-top-more{
                    position: absolute;
                    top:10px;
                    right:10px;
                    width: 24px;
                    height: 24px;
                    background-color: @txtbg-color;
                    border-radius: 2px;
                    z-index: 3;
                    span{
                        position: absolute;
                        top:4px;
                        right:4px;
                        width: 16px;
                        height: 16px;
                        cursor:pointer;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    ul{
                        width: 69px;
                        position: absolute;
                        top:22px;
                        right: 0px;
                        background-color: @txtbg-color;
                        text-align: justify;
                        padding: 10px 10px 6px;
                        border-bottom-left-radius: 4px;
                        border-bottom-right-radius: 4px;
                        display: none;
                        li{
                            line-height: 17px;
                            font-size: 12px;
                            color:@font-color;
                            margin-bottom: 4px;
                        }
                        li:hover{
                            color:@primary-color;
                            cursor: pointer;
                        }
                    }
                    
                }
                .haveinfo-top-more:hover ul{
                    display: block;
                }
                img{
                    max-width:100%;
                    max-height: 100%;
                }
                .Chooseimg{
                    position: absolute;
                    top:0;
                    right:0;
                    width: 28px;
                    height: 28px;
                    z-index:2;
                    cursor:pointer;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                //播放icon
                .icon{
                    position: absolute;
                    top:50%;
                    left: 50%;
                    width: 30px;
                    height: 30px;
                    margin-left: -15px;
                    margin-top: -15px;
                    background-color: red;
                    background: url('../../images/bflogo.png') no-repeat;
                    background-size: 100% 100%;
                    z-index: 2;
                }
            }
        }
        .ivu-upload-list{
            margin-top:0;
            span{
                display: none;
            }
            i{
                display: none;
            }
        }
    }
    .photoboxRight{
         .ivu-tooltip-rel{
            width: 38px;
            margin-bottom: 5px;

        }
        .ivu-tooltip-inner{
            line-height: 28px;
            background-color: #2A2A2A;
            color:#B5BDC2;
            font-size: 14px;
            height: 28px;
            padding: 1px 10px;
            min-height:28px;
            max-width:230px;
        }
        .p7toopSet{
            .ivu-tooltip-inner{
                color: #FE9333;
            }
        }
        .ivu-tooltip-popper[x-placement^="right"] .ivu-tooltip-arrow{
            border-right-color: #2A2A2A;
        }
        .ivu-tooltip-popper[x-placement^="right"]{
            padding: 0 5px 0 8px;
        }
    }
    .ivu-modal-confirm-body{
        padding: 0;
        
    }
    .choosetype{
        .oneType1{
            background: url('../../images/grave_single.png') no-repeat;
            background-size: 100% 100%;
        }
        .oneType2{
            background: url('../../images/grave_single_select.png') no-repeat;
            background-size: 100% 100%;
        }
        .doubleType1{
            background: url('../../images/grave_double.png') no-repeat;
            background-size: 100% 100%;
        }
        .doubleType2{
            background: url('../../images/grave_double_select.png') no-repeat;
            background-size: 100% 100%;
        }
        .info{
            width: 100%;
            height: 263px;
            padding: 45px 100px 0 100px;
            .div{
                width: 130px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                cursor: pointer;
                float: left;
                div{
                    width: 130px;
                    height: 130px;
                }
                p{
                    margin-top:20px;
                }
            }
            .div:nth-child(2){
                float: right;
            }
        }
        .ivu-modal-footer{
            display: none;
        }
        .ivu-modal-body{
            padding: 0;
        }
        .bottom{
            height: 56px;
            border-top: 1px solid #E3E8EA;
            .cancel{
                float: right;
                font-size: 14px;
                color: #686E71;
                padding: 0;
                height: 36px;
                line-height: 36px;                
                margin-right: 40px;
                margin-top: 10px;                
            } 
            .ok{
                float: right;
                padding: 0;
                width: 100px;
                height: 36px;
                line-height: 36px;  
                margin-right: 20px;
                margin-top: 10px;
                font-size: 14px;
            }
        }
    }
    .ivu-tooltip{
        .ivu-tooltip-popper{
            white-space:nowrap;
            text-overflow:ellipsis;
            overflow:hidden;
            padding-right:10px;
            max-width:235px;
        }
    }
    .fontszie {
        .ivu-select-dropdown{
            left:170px !important;
            top:40px !important;
        }
    }
    .fontFamliy {
        .ivu-select-dropdown{
            left:9px !important;
            top:40px !important;
        }
    }
    //页码样式
    .pages{
        width: 100%;
        height: 59px;
        display: flex;
        padding: 15px 20px 0px 25px;
        position: relative;
        .div{
            position: absolute;
            top:10px;
            right:20px;
            span{
                cursor:pointer;
                display: inline-block;
                line-height:36px;
            }
            .ok{
                width: 100px;
                height: 36px;
                text-align:center;
                font-size:14px;
                color:#fff;
                background: #FE9333;
                border-radius: 4px;
            }
            .cancel{
                margin-right:30px;
            }
        }
    }
    .d2d{
        .ivu-input{
            background: #F6FAF9;
        }
    }
    //提示语样式修改
    .pTool,.rsinfobox,.zpinfobox,.changeIcon{
        .ivu-tooltip-inner{
            line-height: 28px;
            background-color: #fff;
            color:#686E71;
            font-size: 14px;
            height: 22px;
            padding: 1px 10px;
            min-height:28px;
            max-width:230px;
        }
        .ivu-tooltip-popper[x-placement^="bottom"] .ivu-tooltip-arrow{
            border-bottom-color: #fff;
        }
    }
    .changeIcon{
        cursor: pointer;
        z-index: 2!important;
        .ivu-tooltip-popper{
            left:24px!important;
        }
        .ivu-tooltip-popper[x-placement^="right"] .ivu-tooltip-arrow{
            border-right-color: #fff;
        }
    }
    .quill-editor{
        background-color: #F6FAF9;
        border: 1px solid #d7dde4;
        font-size:14px;
        border-radius:4px;
        .ql-toolbar.ql-snow{
            border:0;
            border-bottom:1px solid #d7dde4;
        }
        .ql-editor{
            min-height:180px;
            max-height:580px;
        }
        .ql-editor.ql-blank::before {
            font-style: normal;
        }
        .ql-container.ql-snow{
            border:0;
            
            overflow: auto;
            img{
                // max-width: 150px;
            }
        }
        .ql-toolbar.ql-snow .ql-formats{
            margin-right: 8px;
        }
    }
    .workPreview{
        .con{
            img{
                max-width:100%;
                height:auto;
            }
        }
    }
</style>
<template>
<div class="wrap clearfix" @click="bodyclick">
    <v-editheader ref="editheadername" @qtsetFlg="qtsetFlg" @musiclocalStorageFn="musiclocalStorageFn" @releasebtnFN="releasebtnFN" :musiclocalStorage="musiclocalStorage" :savetemplateFn="savetemplateFn" :cemeteryId="cemeteryId" :saveperson="saveperson" :templateid="templateid" @previewFN="previewFN"  @oktext="c" @musicNameFN="musicFN" :tongyongFn="tongyongFn" :myspdataindex="myspdataindex" :caogaoflag="status" :global="global" :tokendata="tokendata" :showtype="typeshow" :imgphototype="imgphototype" :myspfn="myspfn"  :doubleid="doubleCemeteryList" :accountType="accountType" :musicNameIsUse="musicName" :musicIdIsUse="musicUseId" :qrCode = "qrCode"></v-editheader>
    <!--左中部分-->
    <div class="wrapLeft">
        <!-- <h3 class="h3title"><span class="h3titleSpan">模版操作</span><span class="addbtn" @click.stop="addtemplace" v-show="accountType == 0" title="新增模块"></span><span class="delbtn" @click.stop="deltemplace" title="删除模块"  v-show="accountType == 0"></span></h3> -->
        <div class="replacetmpbox">
            <span class="replacetmp" @click.stop="gototemplateList">
                所有模板
            </span>
            <span class="replacetmp2" @click.stop="replacetemplace(1)">更换模版</span>
        </div>
        <div class="contentleft">
            <div class="contentleftdiv">
                <ul class="smailul">
                    <!--<li v-for="(item,index) in commSweepTemplateModuleDTOs" @click.stop="1`(item.type,item.id,index)">
                        <p>{{item.moduleTitle}}</p>
                        <div class="photocontent" v-html="item.moduleHtml">手机样式 </div>
                    </li>-->
                    <draggable v-model="headerstyle" class="dragArea" @update="templacedrag">
                    <li v-for="(item,index) in headerstyle" @click.stop="checktype(item.type,index,item.moduleId)" :class="item.moduleId == chooseLeftIndex.moduleId ?'on':''">
                        <div class="lidiv" >
                            <!-- 提示块 -->
                            <div class="pop"><div class="arrow"></div>拖拽模块进行排序</div>
                            <div :style="item.headerStyle"  v-if="item.type==1" class="photocontent">
                                <!--头像-->
                                <div :style="item.moduleImageDivStyle"><img :src="item.headPictureSource?imgurl+item.headPictureSource:staticimg+'/images/blank5.png'" style="width: 100%;height: 100%;"/></div>
                                <!--姓名-->
                                <div :style="item.nameStyle">{{item.userName}}</div>
                                <!--出生日期-->
                                <div :style="item.introductionDayStyle" v-text="birthdayTime3(item.cemeteryIntroduction.birthDay)+'-'+ birthdayTime3(item.cemeteryIntroduction.deadDay)"></div>
                                <!--个人简介-->
                                <div :style="item.introductionStyle">{{item.introduction}}</div>			
                                <v-edittext :textflag="item.templateModuleContent"></v-edittext>
                                <img  :src="imgurl+item1.picSourcePath" v-for="(item1,index) in item.templateModulePicDTO":style="item1.picStyle">
                                <img  :src="imgurl+item1.videoPicSourcePath" v-for="(item1,index) in item.templateModuleVideoDTO" :style="item1.videoStyle">
                            </div>
                            <!--墓志铭-->
                            <div :style="item.headerStyle"v-if="item.type==2" class="photocontent">
                                <!--标题-->
                                <div  :style="item.nameStyle" >{{item.moduleTitle}}</div>
                                <!--内容-->
                                <div  :style="item.epitaphStyle">{{item.content}}</div>
                                <!--图片素材-->
                                <v-edittext :textflag="item.templateModuleContent"></v-edittext>
                                <img  :src="imgurl+item1.picSourcePath" v-for="(item1,index) in item.templateModulePicDTO" ref="picstyle" :style="item1.picStyle">
                                <img  :src="imgurl+item1.videoPicSourcePath" v-for="(item1,index) in item.templateModuleVideoDTO" ref="spstyle" :style="item1.videoStyle">
                            </div>
                            <!--照片-->
                            <div :style="item.headerStyle" v-if="item.type==3" class="photocontent">
                                <!--标题-->
                                <div :style="item.nameStyle">
                                    <!--图标-->
                                    <img :src="imgurl+item.moduleIcon" :style="item.moduleIconStyle"/>
                                    <!--标题-->
                                    <div :style="item.moduleTitleStyle" >{{item.moduleTitle}}</div>
                                </div>
                                <!--内容-->
                                <div :style="item.moduleSwiperStyle" class="photoDivCon">
                                    <div>					
                                        <swiper :options="swiperOption">
                                            <!-- 幻灯内容 -->
                                            <swiper-slide v-for="(items,index) in (item.photos) " @click.stop="deldom($event,imagearr,index)">								
                                                <div class="imgshow"><img :src="imgurl+items.albumPath" :style="items.imageStyle"></div>								
                                            </swiper-slide>
                                        </swiper>
                                    </div>
                                </div>
                            </div>
                            <!--人生旅途-->
                            <div :style="item.headerStyle" v-if="item.type==4" class="photocontent">
                                    <!--标题-->
                                <div :style="item.nameStyle">
                                    <!--图标-->
                                    <img :src="imgurl+item.moduleIcon" :style="item.moduleIconStyle"/>
                                    <!--标题-->
                                    <div :style="item.moduleTitleStyle">{{item.moduleTitle}}</div>
                                </div>
                                <!--内容-->
                                <div>
                                    <!--时间轴-->
                                    <div :style="item.moduleSwiperStyle">
                                        <swiper :options="rsOption">
                                            <!-- 幻灯内容 -->
                                            <swiper-slide v-for="(items,index) in (item.lifes)">
                                                <div :style="item.moduleSwiperDivStyle">
                                                    <p :style="item.moduleSwiperPStyle" class="tripConTime">{{items.startTime+'-'+items.endTime}}</p>
                                                    <div :style="item.moduleSwiperDiv2Style"></div>
                                                    <div v-if="false" class="tripConDot tripConDot1" :style="item.moduleSwiperIconStyle"><img :src="imgurl+item.moduleSwiperIcon0Path" /></div>
                                                    <div v-else class="tripConDot tripConDot2" :style="item.moduleSwiperIconStyle"><img :src="imgurl+item.moduleSwiperIcon1Path" /></div>
                                                </div>
                                            </swiper-slide>
                                        </swiper>
                                    </div>
                                    <!--内容-->
                                    <div :style="item.moduleContentStyle">{{Singlere.eventContent}}</div>
                                    <!--图片-->
                                    <div :style="item.moduleImageDivStyle" class="displayflex overflow">
                                        <img :src="Singlere.eventPicCutBig?imgurl+Singlere.eventPicCutBig:staticimg+'/images/blank4.png'" :style="Singlere.imageStyle"/>
                                    </div>
                                </div>
                            </div>	                            
                            <!--视频-->
                            <div :style="item.headerStyle"  v-if="item.type==5&&a" class="photocontent">
                                <!--标题-->
                                <div :style="item.nameStyle">
                                    <!--图标-->
                                    <img :src="imgurl+item.moduleIcon" :style="item.moduleIconStyle"/>
                                    <!--标题-->
                                    <div :style="item.moduleTitleStyle">{{item.moduleTitle}}</div>
                                </div>
                                <!--内容-->
                                <div :style="item.moduleSwiperStyle" >
                                    <swiper :options="spOption">
                                        <!-- 幻灯内容 -->
                                        <swiper-slide v-for="(items,index) in (item.videos)" class="videoCon">
                                                <div :style="item.moduleImageDivStyle" class="videoConImg">                                               
                                                    <img :src="items.videoPicPath ?  (items.videoCoverStatus == 1 ? videoImg + items.videoPicPath : imgurl + items.videoPicPath)  : staticimg+'/images/blank3.png'"/>
                                                    <div class="icon"></div>
                                                </div>
                                                <video :src="imgurl+items.videoPath" v-show="false"></video>
                                                <p :style="item.moduleSwiperPStyle" class="videoConTitle">
                                                    {{items.videoName}}
                                                </p>                                       
                                        </swiper-slide>
                                    </swiper>
                                </div>
                            </div>
                            <!--作品集-->
                            <div :style="item.headerStyle" v-if="item.type==6&&a" class="photocontent">
                                <!--标题-->
                                <div :style="item.nameStyle">
                                    <!--图标-->
                                    <img :src="imgurl+item.moduleIcon" :style="item.moduleIconStyle"/>
                                    <!--标题-->
                                    <div :style="item.moduleTitleStyle">{{item.moduleTitle}}</div>
                                </div>
                                <!--内容-->
                                <div :style="item.moduleSwiperPStyle">
                                    <swiper :options="zpOption">
                                        <!-- 幻灯内容 -->
                                        <swiper-slide v-for="(items,index) in (item.works)">
                                            <div :style="item.moduleSwiperDivStyle" >
                                                <div :style="item.moduleImageDivStyle">
                                                    <img :src="imgurl+items.pictureCoverPath" :style="items.imageStyle"/>
                                                </div>
                                                <p :style="item.moduleSwiperPStyle" class="workDivChange">
                                                    {{items.worksName}}
                                                </p>
                                            </div>
                                        </swiper-slide>
                                    </swiper>
                                </div>
                            </div>
                        </div>
                        <!-- 模块新增删除操作 -->
                        <div class="topHand" v-show="item.moduleId == chooseLeftIndex.moduleId && accountType == 0">
                            <span v-show="item.type != 1" @click.stop="deltemplace">删除</span>
                            <span @click.stop="addtemplace" >新增</span>
                        </div>
                        <!-- 修改模块名称 -->
                        <Tooltip content="点击编辑模块名称" placement="bottom" class="pTool">
                            <p class="p" @click.stop="changeNameClick(index,item.moduleId,item.moduleTitle)">{{item.moduleTitle}}</p>
                        </Tooltip>
                    </li>
                    </draggable>
                </ul>
            </div>
        </div>
        <!--基础信息-->
        <div class="baseinfobox" v-if="typeshow==1">
            <div class="baseinfoboxDiv">
                <div class="baseinfo clearfix">
                    <span class="zptitle">照片</span>         
                </div>
                <div class="uploadbox">
                    <img :src="savedate.headPictureSource ? imgurl+savedate.headPictureSource : staticimg+'/images/blank5.png' " class="img">
                    <div class="pop">请上传一张人物图片作为封面图，格式为JPEG、PNG。</div>
                    <p @click.stop="toggleShow">替换头像</p>
                </div>
                <div class="formbox">
                    <p >姓名</p>
                    <input type="text" ref="modelFocusOne" placeholder="请输入被祭扫人姓名" v-model="savedate.userName" class="ivu-input ivu-input-large" maxlength="10">
                </div>
                <div class="formbox clearfix">
                    <p >生卒日期</p>
                    <DatePicker style="width:140px;float:left;" type="date" :clearable=false  :editable=false :value="savedate.cemeteryIntroduction.birthDay" @on-change="handleChangestart" placeholder="请选择出生日期"></DatePicker>
                    <div style="float:left;width:20px;text-align:center;line-height:36px;">-</div>
                    <DatePicker style="width:140px;float:left;" type="date" :clearable=false  :editable=false :value="savedate.cemeteryIntroduction.deadDay" @on-change="handleChangeend" placeholder="请选择逝世日期"></DatePicker>
                </div>
                <div class="formbox">
                    <p>个人简介</p>
                    <textarea placeholder="请输入个人简介" class="ivu-input" v-model="savedate.introduction" maxlength="800"></textarea>
                </div>
                <v-text :textflag="savedate.templateModuleContent" @deltext="delindex" @emittexton="emittexton"></v-text>
                <v-img :imgflag="savedate.templateModulePicDTO" @delimg="delimg"></v-img>
                <!-- <button class="savebtnperson" @click.stop="saveperson" v-if="true">保存</button>
                <button class="savebtnperson" v-else style="background:rgba(42,42,42,0.4);box-shadow:none">保存</button> -->
            </div>
        </div> 
        <div class="mzbinfobox" v-if="typeshow==2">
            <div class="mzbinfoboxDiv">
                <div class="mzbinfo clearfix">
                    <span class="zptitle">{{savedate.moduleTitle}}</span>
                </div>
                <textarea ref="modelFocusTwo" placeholder="请输入墓志铭" class="ivu-input" v-model="savedate.content" maxlength="800"></textarea>
                <v-text :textflag="savedate.templateModuleContent" @deltext="delindex" @emittexton="emittexton"></v-text>  
                <v-img :imgflag="savedate.templateModulePicDTO" @delimg="delimg"></v-img>              
                <!-- <Button type="warning" @click.stop="mzbfn" class="savebtnperson" v-if="true">保存</Button>
                <Button class="savebtnperson" v-else style="background:rgba(42,42,42,0.4);box-shadow:none">保存</Button> -->
            </div>
        </div>
        <div class="photoinfobox" v-if="typeshow==3">
            <div class="photoinfo clearfix" v-show="!managePhoto">
                <span class="zptitle">添加照片</span>
                <span class="glphoto" @click.stop="managePhotoStart" v-show="imagearr.length!=0">管理照片</span>
            </div>
            <p class="title" v-show="!managePhoto">支持JPG、JPEG、PNG可多张选择上传。</p>
            <!--无数据样式-->       
            <div v-show="imagearr.length==0 && !managePhoto" class="not">
                <Button type="warning" @click="WebuploadFn(imagearr,global+'/cemetery/template/relativesAblum/upload/album?moduleId='+mkid+'&cemeteryId='+cemeteryId,'pic',handlewudate,30,'上传传记人物的照片，供亲友浏览怀念，单次最多上传30张，图片格式为JPEG、PNG。')"  class="btn btn1">上传照片</Button>
                <Button type="ghost" @click.stop="imgphototype(1)" class="btn" style="color:#FE9333;border-color:#FE9333;">从我的上传选择</Button>
            </div>
            <!--有数据样式-->
            <div v-if="imagearr.length != 0 && !managePhoto" class='have clearfix'>
                <div class="one">
                    <Button type="ghost" @click="WebuploadFn(imagearr,global+'/cemetery/template/relativesAblum/upload/album?moduleId='+mkid+'&cemeteryId='+cemeteryId,'pic',handlewudate,30,'上传传记人物的照片，供亲友浏览怀念，单次最多上传30张，图片格式为JPEG、PNG。')"  class="btn btn1">上传照片</Button>
                    <Button type="ghost" @click.stop="imgphototype(1)" class="btn">我的上传</Button>
                </div>
                <div  v-for="(item,index) in imagearr" class="info"> 
                    <div class="delete" @click.stop="editdelbtn(item.id,index)"></div>
                    <div class="popup" @click.stop="bigImgshwo(item.albumPath,item.imageStyle,index)"></div>
                    <div class="haveinfo-top-more">
                        <span><img src="../../images/maskset.png"/></span>
                        <ul>
                            <!-- <li @click.stop="editdelbtn(item.id,index)">删除</li> -->
                            <li @click.stop="editimg(index)">编辑</li>
                            <li @click.stop="photozhiding(item.id,index)">置顶</li>
                            <li @click.stop="tranfromFN(item.id,imagearr,index,1)">右旋90度</li>
                            <li @click.stop="tranfromFN(item.id,imagearr,index)">左旋90度</li>                                
                        </ul>
                    </div>
                    <div style="width:100%;height:100%;position: absolute;top: 0;left: 0;justify-content: center;display: flex;align-items: center;overflow: hidden;">
                        <img :src="imgurl+item.albumPath" :style="item.imageStyle" />
                    </div>
                    <p class="fielname">{{item.albumName?item.albumName:'图片名称'}}</p>
                </div>
                <!--分页  -->
                <div class="pages" style="width:100%;height:71px;display:flex;justify-content: center;align-items: center;">
                    <Page :total="imagearrtotal" :page-size="20" @on-change="queryPhoto" :current="imageCurrent"></Page>
                </div>
            </div>
            <!--管理照片-->
            <div v-show="managePhoto">
                <div class="photoinfo clearfix">
                    <div  class="zptitle" v-if="imagearr.length!=0">
                        <Checkbox v-model="photoAllchoose" style="font-size:14px;">本页全选</Checkbox>
                        <span>已选<em> {{isChooseimgNum}} </em>张</span>
                        <span @click.stop="pldelphoto" class="del"></span>
                    </div>
                    <span class="glphoto" @click.stop="managePhotoOver">完成管理</span>
                </div>
                <p class="title" v-if="imagearr.length!=0">直接拖拽照片可调整顺序</p>
                <div v-show="imagearr.length != 0 && managePhoto" class='have clearfix'>
                    <draggable v-model="imagearr" class="dragArea" @update="dragvue">        
                        <div  v-for="(item,index) in imagearr" class="info" @click.stop="Chooseimg(imageCurrent,index)">
                            <div  class="Chooseimg"><img :src=" isChooseimg[index]==true ? staticimg+'/images/choose2.png':staticimg+'/images/choose.png' "/></div>
                            <img :src="imgurl+item.albumPath" :style="item.imageStyle"/>
                        </div>
                    </draggable>                
                </div>
                 <!--分页  -->
                <div class="pages" style="width:100%;height:71px;display:flex;justify-content: center;align-items: center;">
                    <Page :total="imagearrtotal" :page-size="20" @on-change="queryPhoto" :current="imageCurrent"></Page>
                </div>
            </div>
        </div>
        <div class="rsinfobox" v-if="typeshow==4" ref='rsinfoboxref'>
            <div  class="rsinfoboxDiv">
                <div class="rsinfo clearfix">
                    <span class="zptitle">人生旅途</span>
                    <span style="float:right;font-size: 14px;color: #FE9333;cursor: pointer;" @click="addTrip" v-show="reltdata.length != 0">新增旅途</span>
                </div>
                <p class="title">人生旅途，记录精彩，利用时间轴的形式，再现亲人的人生旅程。</p>
                <!-- <div class="rstopshow">
                    <div class="img">
                    <img :style="Singlere.imageStyle" :src="Singlere.eventPicCutBig ? imgurl+Singlere.eventPicCutBig :staticimg+'/images/blank4.png'"/>                    
                    </div>
                    <p>请上传事件图片，格式为JPG、JPEG、PNG。</p>
                    <Button type="ghost" @click="WebuploadFn(Singlere.eventPicCutBig,global+'/cemetery/template/lifeJourney/fileUploadByFileStream?moduleId='+mkid+'&cemeteryId='+cemeteryId,'file',handleSuccessrs,1)">上传图片</Button>
                </div>                
                    <div class="formbox clearfix">
                        <p>起止时间</p>
                        <Date-picker  style="width:140px;float:left;" type="year" :value="Singlere.startTime"  @on-change="handleChangerStart" placeholder="选择日期" :editable="false" :clearable="false"></Date-picker>
                        <div style="float:left;width:20px;text-align:center;line-height:36px;">-</div>
                        <Date-picker  style="width:140px;float:left;" type="year" :value="Singlere.endTime"  @on-change="handleChangerEnd" placeholder="选择日期" :editable="false" :clearable="false"></Date-picker>
                    </div>
                    <div class="formbox">
                        <p>事件说明</p>
                        <textarea   placeholder="请输入时间说明" class="ivu-input" v-model="Singlere.eventContent" maxlength="150" @keydown="lifesBtn=true" ></textarea>
                    </div>
                    <Button type="ghost" @click.stop="saverslt(2)" class="savebtnperson" v-show="lifesBtn">{{lifesBtnCon}}</Button>
                    <Button class="savebtnperson" v-show="!lifesBtn" style="background:rgba(42,42,42,0.4);box-shadow:none">保存</Button> -->
                <!-- 缺省页 -->
                <div class="ulinfoNot" v-show="reltdata.length == 0">
                    <div @click="addTrip">新增旅途</div>
                </div>
                <ul class="ulinfo" v-show="reltdata.length != 0">
                    <li v-for="(item,index) in reltdata" @click.stop="editrs(index,1)">
                        <div class="img">
                            <img :style="item.imageStyle" :src="item.eventPicCutBig ? imgurl+item.eventPicCutBig :staticimg+'/images/blank4.png' ">                            
                        </div>
                        <div class="data">
                            <p class="p2">{{item.eventContent}}</p>                            
                            <p class="p3">
                                <!-- <span class="sj">{{stringfilter(item.startTimeAndEndTime)}}</span>         -->
                                <span class="sj">{{stringfilter(item.startTime)+'-'+stringfilter(item.endTime)}}</span> 
                                <Tooltip content="删除" placement="bottom" class="sc">
                                    <p class="p" @click.stop="delrs(index,item.id)" ></p>
                                </Tooltip>   
                                <Tooltip content="编辑" placement="bottom" class="bg">
                                    <p class="p" @click.stop="editrs(index,1)" ></p>
                                </Tooltip>     
                            </p>                            
                        </div>
                    </li>
                </ul>

            </div>
        </div>
        <div class="zpinfobox" v-if="typeshow==6" ref="zpinfobox">
            <div class="zpinfoboxDiv">
                <div class="zpinfo clearfix">
                    <span class="zptitle">作品</span>
                    <span style="float:right;font-size: 14px;color: #FE9333;cursor: pointer;" @click="addWorks" v-show="workDataTotal != 0">新增作品</span>
                </div>
                 <p class="title">作品集记录传记人物的智慧创作成果，供世人了解、欣赏、品味。</p>
                <!-- 缺省页 -->
                <div class="ulinfoNot" v-show="workDataTotal == 0">
                    <div @click="addWorks">新增作品</div>
                </div>
                <ul class="ulinfo" v-show="workDataTotal != 0">
                    <li v-for="(item,index) in zpdata" @click.stop="editzp(index)">
                        <div class="img">
                            <img :src="imgurl+item.pictureCoverPath" :style="item.imageStyle">                    
                        </div>
                        <div class="data">
                            <p class="p1">{{item.worksName}}</p>
                            <p class="p2"><span class="sj">{{item.creativeTime}}</span></p>
                            <p class="p3">                         
                                <Tooltip content="删除" placement="bottom" class="sc">
                                    <p class="p" @click.stop="delzp(index)" ></p>
                                </Tooltip>  
                                <Tooltip content="编辑" placement="bottom" class="bg">
                                    <p class="p" @click.stop="editzp(index)" ></p>
                                </Tooltip>
                            </p>
                        </div>
                    </li>
                </ul>
                <!-- 作品分页 -->
                <div class="pages" v-if="workDataTotal != 0" style="width:100%;height:71px;display:flex;justify-content: center;align-items: center;">
					<!-- 分页 -->
					<Page show-total  :total="workDataTotal" :page-size="9" @on-change="queryWorks" :current="workDataPage"></Page>
				</div>
            </div>
        </div>
        <div class="videobox" v-if="typeshow==5">
            <div class="photoinfo clearfix" v-show="!manageVideo">
                <span class="zptitle">添加视频</span>
                <span class="glphoto" @click.stop="manageVideo=true" v-show="spdata.length!=0">管理视频</span>
            </div>
            <p class="title" v-show="!manageVideo">上传视频，动态记录人生精彩，可多次选择上传。</p>
            <!--无数据样式-->       
            <div v-if="spdata.length==0" class="not">
                <v-upload
                        name
                        ref="spupload"
                        :action="global+'/video/material/save?moduleId='+mkid+'&cemeteryId='+cemeteryId+'&videoId='+randomid+'&isUsed=1&name='+videoinfo.videoName+'&description='+videoinfo.videoDesc"
                        :headers="tokendata"
                        :queue=false
                        @change="changesp"
                        :accepts="['video/webm','video/ogg','video/mp4']"
                        :multiple=false
                        @progress="progressFN"
                        @success="spdialogsucFn"
                        :auto=false
                        name="videoFile">
                        <Button type="warning"  class="btn btn1">上传视频</Button>
                    </v-upload> 
                <Button type="ghost" @click.stop="myspfn(1,1)" class="btn" style="color:#FE9333;border-color:#FE9333;"> 从我的上传选择</Button>
            </div>
            <!--有数据样式-->
            <div v-if="spdata.length != 0 && !manageVideo" class='have'>
                <div class="one">
                     <v-upload
                        name
                        ref="spupload"
                        :action="global+'/video/material/save?moduleId='+mkid+'&cemeteryId='+cemeteryId+'&videoId='+randomid+'&isUsed=1&name='+videoinfo.videoName+'&description='+videoinfo.videoDesc"
                        :headers="tokendata"
                        :queue=false
                        @change="changesp"
                        :accepts="['video/webm','video/ogg','video/mp4']"
                        :multiple=false
                        @progress="progressFN"
                        @success="spdialogsucFn"
                        :auto=false
                        name="videoFile">
                        <Button type="ghost"  class="btn btn1">上传视频</Button>
                    </v-upload> 
                    <Button type="ghost" @click.stop="myspfn(1,1)" class="btn" >我的上传</Button>
                </div>
                <div  v-for="(item,index) in spdata" class="info">
                    <div class="haveinfo-top-more">
                        <span><img src="../../images/maskset.png" /></span>
                        <ul>
                            <li @click.stop="editsp(item.id,index)">编辑</li>
                            <li @click.stop="spzhiding(item.id,index)">置顶</li>
                            <li @click.stop="delspstausbtn(item.id,index)">删除</li>
                        </ul>
                    </div>
                    <div class="icon" @click.stop="playvideo(item.videoPath)"></div>
                    <p class="fielname">{{item.videoName?item.videoName:'视频名称'}}</p> 
                    <img @click.stop="playvideo(item.videoPath)" :src="item.videoPicPath ?  (item.videoCoverStatus == 1 ? videoImg + item.videoPicPath : imgurl + item.videoPicPath)  : staticimg+'/images/blank3.png'"/>
                </div>
            </div>
            <!-- 管理视频 -->
            <div class="" v-show="manageVideo">
                <!-- manageVideo -->
                <div class="photoinfo clearfix">
                    <div  class="zptitle" v-if="spdata.length!=0">
                        <Checkbox v-model="videoAllchoose" style="font-size:14px;">本页全选</Checkbox>
                        <span>已选<em> {{isChoosevideoNum}} </em>个</span>
                        <span @click.stop="pldeleteVideo" class="del"></span>
                    </div>
                    <span class="glphoto" @click.stop="videooverFN">完成管理</span>
                </div>
                <p class="title" v-if="spdata.length!=0">直接拖视频可调整顺序</p>
                <div v-show="spdata.length != 0 && manageVideo" class='have clearfix'>
                    <draggable v-model="spdata" class="dragArea" @update="dragvueVideo">        
                        <div  v-for="(item,index) in spdata" class="info" @click.stop="ChooseVideo(index)">
                            <div  class="Chooseimg"><img :src=" isChoosevideo[index]==true ? staticimg+'/images/choose2.png':staticimg+'/images/choose.png' "/></div>
                            <img :src="item.videoPicPath ?  (item.videoCoverStatus == 1 ? videoImg + item.videoPicPath : imgurl + item.videoPicPath)  : staticimg+'/images/blank3.png'" />
                        </div>
                    </draggable>
                </div>
            </div>
        </div>
        <!--新增模块接口-->
        <div :class="newModule" @click.stop="">
            <!--关闭按钮-->
            <div class="close" @click.stop="newModule='newModule'"></div>
            <Select v-model="subtemplacetype" class="select " placeholder="请选择功能">
                <Option :value="0" :key="item">{{'全部'}}</Option>
                <Option v-for="item in templacetypelist" :value="item.code" :key="item">{{ item.value }}</Option>
            </Select>
            <Select v-model="subtemplacefg" class="select select2" placeholder="请选择风格">
                <Option :value="0" :key="item">{{'全部'}}</Option>
                <Option v-for="item in templacefglist" :value="item.code" :key="item">{{ item.value }}</Option>
            </Select>
            <div class="input">
                <Input v-model="moduleName" placeholder="请输入名称搜索模块" @on-enter="selecttemplace(1)"></Input>
                <img src="../../images/edit_search.png" @click.stop="selecttemplace(1)"/>
                <!-- <Button type="primary" @click.stop="selecttemplace(1)"  icon="ios-search" class="btn"></Button>     -->
            </div>
            <div class="info" v-if="templacelistNotInfo && queryflag" ref="newModuleRef">
                <div v-for="(item,index) in moduleHtml"  class="moduleHtmlWarp">
                    <div :style="item.headerStyle"  @click.stop="newaddtemplace(item.type,item.moduleId,index)" v-if="item.type==1" class="photocontent">
                        <!--头像-->
                            <div :style="item.moduleImageDivStyle"><img :src="imgurl+item.headPictureSource" style="width: 100%;height: 100%;"/></div>
                            <!--姓名-->
                            
                            <div :style="item.nameStyle" ref="nameStyle">{{item.userName}}</div>
                            <!--出生日期-->
                            <div :style="item.introductionDayStyle">{{item.birthDayAndDeadDay}}</div>
                            <!--个人简介-->
                            <div :style="item.introductionStyle">{{item.introduction}}</div>			
                            <v-edittext :textflag="item.templateModuleContent"></v-edittext>
							<img  :src="imgurl+item1.picSourcePath" v-for="(item1,index) in item.templateModulePicDTO" :style="item1.picStyle">
							<img  :src="imgurl+item1.videoPath" v-for="(item1,index) in item.templateModuleVideoDTO" :style="item1.videoStyle">
                    </div>
                    <!--墓志铭-->
                    <div :style="item.headerStyle"  @click.stop="newaddtemplace(item.type,item.moduleId,index)"v-if="item.type==2" class="photocontent">
                        <!--标题-->
                            <div  :style="item.nameStyle">{{item.moduleTitle}}</div>
                            <!--内容-->
                            <div  :style="item.epitaphStyle">{{item.content}}</div>
                            <!--图片素材-->
                            <v-edittext :textflag="item.templateModuleContent"></v-edittext>
							<img  :src="imgurl+item1.picSourcePath" v-for="(item1,index) in item.templateModulePicDTO" :style="item1.picStyle">
							<img  :src="imgurl+item1.videoPath" v-for="(item1,index) in item.templateModuleVideoDTO" :style="item1.videoStyle">
                    </div>
                    <!--照片-->
                    <div :style="item.headerStyle"  @click.stop="newaddtemplace(item.type,item.moduleId,index)"v-show="item.type==3" class="photocontent">
                        <!--标题-->
                            <div :style="item.nameStyle">
                                <!--图标-->
                                <img :src="imgurl+item.moduleIcon" :style="item.moduleIconStyle"/>
                                <!--标题-->
                                <div :style="item.moduleTitleStyle" >{{item.moduleTitle}}</div>
                            </div>
                            <!--内容-->
                            <div :style="item.moduleSwiperStyle" class="photoDivCon">
                                <div>					
                                    <swiper :options="swiperOption">
                                        <!-- 幻灯内容 -->
                                        <swiper-slide v-for="(items,index) in (item.photos) " @click.stop="deldom($event,imagearr,index)">								
                                            <div class="imgshow"><img :src="imgurl+items.albumPath" style="items.imageStyle"></div>								
                                        </swiper-slide>
                                    </swiper>
                                </div>
                            </div>
                    </div>
                    <!--人生旅途-->
                    <div :style="item.headerStyle"  @click.stop="newaddtemplace(item.type,item.moduleId,index)"v-if="item.type==4" class="photocontent">
                            <!--标题-->
                            <div :style="item.nameStyle">
                                <!--图标-->
                                <img :src="imgurl+item.moduleIcon" :style="item.moduleIconStyle"/>
                                <!--标题-->
                                <div :style="item.moduleTitleStyle">{{item.moduleTitle}}</div>
                            </div>
                            <!--内容-->
                            <div>
                                <!--时间轴-->
                                <div :style="item.moduleSwiperStyle">
                                    <swiper :options="rsOption">
                                        <!-- 幻灯内容 -->
                                        <swiper-slide v-for="(items,index) in (item.lifes)">
                                            <div :style="item.moduleSwiperDivStyle">
                                                <p :style="item.moduleSwiperPStyle" class="tripConTime">{{items.startTime+'-'+items.endTime}}</p>
                                                <div :style="item.moduleSwiperDiv2Style"></div>
                                                <div v-if="false" class="tripConDot tripConDot1" :style="item.moduleSwiperIconStyle"><img :src="imgurl+item.moduleSwiperIcon0Path" /></div>
                                                <div v-else class="tripConDot tripConDot2" :style="item.moduleSwiperIconStyle"><img :src="imgurl+item.moduleSwiperIcon1Path" /></div>
                                            </div>
                                        </swiper-slide>
                                    </swiper>
                                </div>
                                <!--内容-->
                                <div :style="item.moduleContentStyle">{{Singlere.eventContent}}</div>
                                <!--图片-->
                                <div :style="item.moduleImageDivStyle" class="displayflex overflow">
                                    <img :src="imgurl+Singlere.eventPicCut" :style="Singlere.imageStyle"/>
                                </div>
                            </div>
                    </div>	
                    <!--作品集-->
                    <div :style="item.headerStyle"  @click.stop="newaddtemplace(item.type,item.moduleId,index)"v-if="item.type==6" class="photocontent">
                         <!--标题-->
                            <div :style="item.nameStyle">
                                <!--图标-->
                                <img :src="imgurl+item.moduleIcon" :style="item.moduleIconStyle"/>
                                <!--标题-->
                                <div :style="item.moduleTitleStyle">{{item.moduleTitle}}</div>
                            </div>
                            <!--内容-->
                            <div :style="item.moduleSwiperPStyle" class="workCon">
                                <swiper :options="zpOption">
                                    <!-- 幻灯内容 -->
                                    <swiper-slide v-for="(items,index) in (item.works)">
                                        <div :style="item.moduleSwiperDivStyle">
                                            <div :style="item.moduleImageDivStyle"><img :src="imgurl+items.pictureCoverPath" :style="items.imageStyle"/></div>
                                            <p :style="item.moduleSwiperPStyle">
                                                {{items.worksName}}
                                            </p>
                                        </div>
                                    </swiper-slide>
                                </swiper>
                            </div>
                    </div>	
                    <!--视频-->
                    <div :style="item.headerStyle" @click.stop="newaddtemplace(item.type,item.moduleId,index)" v-if="item.type==5" class="photocontent">
                         <!--标题-->
                            <div :style="item.nameStyle">
                                <!--图标-->
                                <img :src="imgurl+item.moduleIcon" :style="item.moduleIconStyle"/>
                                <!--标题-->
                                <div :style="item.moduleTitleStyle">{{item.moduleTitle}}</div>
                            </div>
                            <!--内容-->
                            <div :style="item.moduleSwiperStyle" >
                                <swiper :options="spOption">
                                    <!-- 幻灯内容 -->
                                    <swiper-slide v-for="(items,index) in (item.videos)" class="videoCon">
                                            <div :style="item.moduleImageDivStyle" class="videoConImg">
                                                <img :src="items.videoPicPath ?  (items.videoCoverStatus == 1 ? videoImg + items.videoPicPath : imgurl + items.videoPicPath)  : staticimg+'/images/blank3.png'"/>
                                                <div class="icon"></div>
                                            </div>
                                            <video :src="imgurl+items.videoPath" v-show="false"></video>
                                            <p :style="item.moduleSwiperPStyle" class="videoConTitle">
                                                {{items.videoName}}
                                            </p>                                       
                                    </swiper-slide>
                                </swiper>
                            </div>
                    </div>
                    <p class="p">{{item.moduleTitle}}</p>				
                </div>

                <p @click.stop="selecttemplace(0)" v-if="templacelistNot" style="display:block;text-align:center;cursor: pointer;clear:both">加载更多</p>
                <p v-else style="display:block;text-align:center;clear:both">已经到底了</p>
            </div>
            <!-- 缺省页 -->                
            <div class="notInfo" v-if="!templacelistNotInfo">
                <img src="../../images/noresult.png"/>
                <p>很抱歉，没有找到您需要的信息</p>
            </div>
        </div>
        <!--更换模板START-->
        <div :class="changeModule" @click.stop="">
            <div class="close" @click.stop="changeModule='newModule'"></div>
            <div class="mbtitle">
                <span :class="changeModuleS1" @click.stop="replacetemplace(1)">最热</span>
                <span :class="changeModuleS2" @click.stop="replacetemplace(2)">收藏</span>
                <router-link slot="left" :to="'/templateList?s='+cemeteryId+'&isChoose='+$route.query.nid">查看更多</router-link>
            </div>
            <ul class="mbul">
                <li v-for="(item,index) in selecttemplacelist">
                    <div class="img"  @click.stop="creatInfo(item.id)">
                        <div  style="transform: scale(0.29)!important;" class="showdiv">
                            <div :style="item.templateModule.headerStyle">										<!--头像-->
                                <div :style="item.templateModule.moduleImageDivStyle"><img :src="imgurl+item.templateModule.cemeteryIntroduction.headPictureSource" style="width: 100%;height: 100%;"/></div>
                                    <!--姓名-->
                                    <div :style="item.templateModule.nameStyle">{{item.templateModule.cemeteryIntroduction.userName}}</div>
                                    <!--出生日期-->
                                    <div :style="item.templateModule.introductionDayStyle">{{birthdayTime3(item.templateModule.cemeteryIntroduction.birthDay)+birthDayAnd+birthdayTime3(item.templateModule.cemeteryIntroduction.deadDay)}}</div>
                                    <!--个人简介-->
                                    <div :style="item.templateModule.introductionStyle">{{item.templateModule.cemeteryIntroduction.introduction}}</div>			
                                    <v-edittext :textflag="item.templateModule.templateModuleContent"></v-edittext>
                                    <img  :src="imgurl+item1.picSourcePath" v-for="(item1,index) in item.templateModule.templateModulePicDTO" :style="item1.picStyle">
                                    <img  :src="imgurl+item1.videoPicSourcePath" v-for="(item1,index) in item.templateModule.templateModuleVideoDTO" :style="item1.videoStyle">
                            </div>
                        </div>
                    </div>
                    <!--<div class="img" v-html="item.moduleHtml"></div>-->
                    <!--<img :src="global+item.templatePath" @click.stop="creatInfo(item.id)"/>-->
                    <div class="div"><p>{{item.templateName}}</p>
                        <!--<span :class="item.isCollect?'sc':'wsc'"></span>-->
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <v-fourpublish ref="fourFn" :templateId="templateid" :cemeteryId="cemeteryId" :bgimg="bgimg" :tokendata="tokendata" :global="global" :texthide="tongyongflag" :biaotifn="biaotifn" :stylefour="stylefour" @closefour="closefourFn" @emittexthide="fourFn" @fourstyle="fourstyleemitFn"></v-fourpublish>
    <v-textdialog ref="textdialogFN" :texthide="texthide" :fontSize="fontSize" :clearstyleFn="clearstyleFn" :currentel="currentel" :currentelstr="currentelstr" @styletext="currenteltext" @emittexthide="emitFn"></v-textdialog>
    <v-imgdialog ref="imgdialog" :imghide="imghide" :checktypeFN="checktypeFN" :imgdialogHide="imgdialogHide" :swipedata="savedate" :clearstyleFn="clearstyleFn" :typeimgvideo="typeshow" fontSize="fontSize" :currentel="currentel" @styleimg="currentelimg"></v-imgdialog>
    <v-sjzdialog ref="sjzdialogFN" :xqsjzdialogShow="xqsjzdialogShow" :sjzhide="sjzhide":clearstyleFn="clearrsStyle" @stylesjz="stylesjzFn" :currentel="currentel" :checkiconFn="checkiconFn" :iconimg="global+savedate.moduleSwiperIcon0Path"></v-sjzdialog>
    <Modal v-model="photoModal" title="图片素材" @on-cancel="imgdialogcloseFn" class="photoModal" width="800">
        <div>
            <div  class="left">
                <div class="top">
                    <p @click.stop="myimgfn(1)" :class="topClass" v-show="!biaotiflag"><img src="../../images/element_lefticon_upload.png"/>我的上传</p>
                    <p @click.stop="myimagefn(1,0,'')" :class="topClass2" v-show="!biaotiflag"><img src="../../images/element_lefticon_photo.png"/>图片库</p>
                    <p @click.stop="imgRecentlyUseFn" :class="topClass4" v-show="!biaotiflag"><img src="../../images/element_lefticon_photocopy.png"/>最近使用</p>
                    <p @click.stop="biaotifn(1)" :class="topClass3"  v-show="biaotiflag"><img src="../../images/element_lefticon_photo.png"/>标题背景</p>
                </div>                    
                <Button type="ghost" @click="WebuploadFn(myimagearr,global+'/picture/material/batch/upload?cemeteryId='+cemeteryId,'pic',myimguploadFN,30,'上传照片至素材库，便捷使用，单次最多上传30张，图片格式为JPEG、PNG。')" class="btn btn1">
                    上传照片
                    <div class="btnHover">
                        用户使用图片素材即遵守《星星网图片版权许可与服务协议》，并对其自行上传的作品承担全部责任。
                        支持格式：JPG、JPEG、PNG，一次最多上传30张；大小无限制，但会影响打开速度。
                    </div>
                </Button>
            </div>
            <div class="right">
                <div class="" v-show="photoRight"><!--我的上传-->
                    <div class="title">
                        <!-- 管理 -->
                        <div class="manage" v-if="imgdialogflag" @click.stop="manageImgDialogFn"><img src="../../images/fcguanli.png" />管理</div>
                        <!-- 取消管理 -->
                        <div class="cancelManage" v-if="!imgdialogflag">
                            <!-- <span>直接拖动可以调整顺序</span> -->
                            <span>已选中<i> {{checkimgnum}} </i>个照片</span>
                            <Checkbox v-model="allChooseImgFlg"></Checkbox>
                            <span @click.stop="allChooseImgFlg = !allChooseImgFlg">全选</span>
                            <span @click.stop="delimgFn">删除</span>
                            <span @click.stop="manageImgDialogFn" class="bnt3">完成管理</span>
                        </div>
                    </div> 
                    <ul class="ul" v-show="myimagearr.length != 0">
                        <li  v-if="imgdialogflag" v-for="(item,index) in myimagearr" :class="isMyChooseImg[index]==true?'li lion':'li'">
                            <img src="../../images/chooseimg.png" class="choose" v-show="isMyChooseImg[index]==true"/>
                            <img :src="imgurl+item.sourcePath" class="img" :style="item.imageStyle"/>
                            <p class="fielname">{{item.name?item.name:'图片名称'}}</p>
                            <div class="div">
                                <!-- <span @click.stop="myimgdel(item.id,index)" class="span del">删除</span> -->
                                <span @click.stop="imgPreviewFun(item.sourcePath,item.imageStyle)" class="span del">预览</span>
                                <span @click.stop="imguse($event,index)" style="position: absolute; z-index: 10;" class="span">{{isMyChooseImg[index]==true?'取消':'选择'}}</span> 
                                <div class="more">
                                    <span><img src="../../images/maskset.png"/></span>
                                    <ul>                               
                                        <li @click.stop="tranfromFNimg(item.id,myimagearr,index,1)">右旋90度</li>
                                        <li @click.stop="tranfromFNimg(item.id,myimagearr,index)">左旋90度</li>
                                    </ul>
                                </div>    
                            </div>
                        </li>
                        <li  v-if="!imgdialogflag"  v-for="(item,index) in myimagearr" :class="isMyDelChooseImg[index]==true?'li lion':'li'">
                            <img src="../../images/chooseimg.png" class="choose" v-show="isMyDelChooseImg[index]==true"/>
                            <img :src="imgurl+item.sourcePath" class="img" :style="item.imageStyle"/>
                            <p class="fielname">{{item.name?item.name:'图片名称'}}</p>
                            <div class="div">
                                <span @click.stop="imgPreviewFun(item.sourcePath,item.imageStyle)" class="span del">预览</span>
                                <span @click.stop="imgdeluse($event,index)" style="position: absolute; z-index: 10;" class="span">{{isMyDelChooseImg[index]==true?'取消':'选择'}}</span>  
                            </div>
                        </li>
                    </ul>
                    <!-- 缺省页 -->
                    <div class="notData" v-show="myimagearr.length == 0">
                        <img  src="../../images/element_nophoto.png"/>
                        <p>暂无数据</p>
                    </div>
                    <div class="pages">
                        <Page :total="myimagearrtotal" :page-size="15" :current="myimgdata" @on-change="myimgfn" ></Page>
                        <div class="div">
                            <span class="cancel" @click="photoModal=false">取消</span>
                            <span class="ok" @click="imgusesuc">确定</span>                            
                        </div>
                    </div>
                </div>
                <div class="" v-show="cloudphotoRight"><!--图片素材库-->
                    <div class="title">
                        <span :class="chooseimgtype==0?'on':''" @click.stop="myimagefn(1,0,'')">全部</span>
                        <span v-for="(item,index) in imagetype" @click.stop="myimagefn(1,item.code,'')"  :class="item.code==chooseimgtype?'on':''">{{item.value}}</span>
                        <Input v-model="imageName" size="large" placeholder="关键字搜索" class="input"></Input>
                        <div @click.stop="myimagefn(1,0,imageName)" class="btn"></div>
                    </div> 
                    <ul class="ul" v-show="syrimagearr.length != 0">
                        <li v-for="(item,index) in syrimagearr" :class="isMyChooseImg[index]==true?'li lion':'li'">
                            <img src="../../images/chooseimg.png" class="choose" v-show="isMyChooseImg[index]==true"/>
                            <img :src="imgurl+item.sourcePath" class="img" :style="item.imageStyle"/>
                            <div class="div">
                                <span @click.stop="imgPreviewFun(item.sourcePath,item.imageStyle)" class="span del">预览</span>
                                <span @click.stop="cloudimguse($event,index)" class="span">{{isMyChooseImg[index]==true?'取消':'选择'}}</span>
                            </div>
                        </li>
                    </ul>
                    <!-- 缺省页 -->
                    <div class="notData" v-show="syrimagearr.length == 0">
                        <img  src="../../images/element_nophoto.png"/>
                        <p>暂无数据</p>
                    </div>
                     <div class="pages">
                        <Page :total="syrimagearrtotal" :page-size="30" @on-change="myimagefn" :current="imgCurrent"></Page>
                        <div class="div">
                            <span class="cancel" @click="photoModal=false">取消</span>
                            <span class="ok" @click.stop="cloudimgusesuc">确定</span>                            
                        </div>
                    </div>
                </div>
                <div v-show="biaotiflag"><!--标题背景图片库-->
                    <div class="title"></div> 
                    <ul class="ul" v-show="btbglist.length != 0">
                        <li v-for="(item,index) in btbglist" class="li">
                            <img :src="imgurl+item.sourcePath" class="img"/>
                            <div class="div">
                                <span @click.stop="bgimgFn(item.sourcePath)" class="span del">使用</span>
                            </div>
                        </li>
                    </ul>
                    <!-- 缺省页 -->
                    <div class="notData" v-show="btbglist.length == 0">
                        <img  src="../../images/element_nophoto.png"/>
                        <p>暂无数据</p>
                    </div>
                    <div class="pages">
                        <Page :total="myimagearrtotal" :page-size="15" :current="myimgdata" @on-change="myimgfn" ></Page>
                        <div class="div">
                            <span class="cancel" @click="photoModal=false">取消</span>
                            <span class="ok" @click="imgusesuc">确定</span>                            
                        </div>
                    </div>
                </div>
                <div v-show="imgRecentlyUseFlag"><!-- 图片素材最近使用 -->
                     <div class="title"></div>  
                    <ul class="ul" v-show="imglocation.length != 0">
                        <li v-for="(item,index) in imglocation" :class="isMyChooseImg[index]==true?'li lion':'li'">
                            <img src="../../images/chooseimg.png" class="choose" v-show="isMyChooseImg[index]==true"/>
                            <img :src="imgurl+item.sourcePath" class="img" :style="item.imageStyle"/>
                            <p class="fielname">{{item.name?item.name:'图片名称'}}</p>
                            <div class="div">
                                <!-- <span @click.stop="myimgdel(item.id,index)" class="span del">删除</span> -->
                                <span @click.stop="imgRecentlyFn($event,index)" style="position: absolute; z-index: 10;" class="span del">{{isMyChooseImg[index]==true?'取消':'选择'}}</span> 
                            </div>
                        </li>
                    </ul>
                     <!-- 缺省页 -->
                    <div class="notData" v-show="imglocation.length == 0">
                        <img  src="../../images/element_nophoto.png"/>
                        <p>暂无数据</p>
                    </div>
                    <div class="pages">
                        <div class="div">
                            <span class="cancel" @click="photoModal=false">取消</span>
                            <span class="ok" @click="imgRecentlyUseFnsuc">确定</span>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Modal>
    <Modal v-model="spModal" title="视频素材" class="photoModal" width="800">
        <div>
            <div  class="left">
                <div class="top">
                    <p :class="topClass" @click.stop="myspfn(1,1)"><img src="../../images/element_lefticon_upload.png"/>我的上传</p>
                    <p @click.stop="spRecentlyUseFn" :class="topClass1" ><img src="../../images/element_lefticon_photocopy.png"/>最近使用</p>
                </div>                    
                <Upload
                ref="uploadsptk"
                :on-success="spdataFN" 
                :on-error="handleErrorp"
                :default-file-list="mysparr"
                :show-upload-list="true"
                :action="global+'/video/material/upload'" 
                :headers="tokendata" name="videoFile" 
                :format="['webm','ogg','mp4']"
                :on-format-error="handleFormatError">
                    <Button type="ghost"  class="btn btn1">
                        上传视频
                        <div class="btnHover">
                            用户使用视频素材即遵守《星星网视频版权许可与服务协议》，并对其自行上传的作品承担全部责任。
                            支持格式：MP4，大小无限制，但会影响打开速度。
                        </div>
                    </Button>
                </Upload>
            </div>
            <div class="right">
                <div v-if="spRight"><!--我的上传-->
                    <div class="title">
                        <!-- 管理 -->
                        <div class="manage" v-if="spdialogflag && uploadsptk.length != 0" @click.stop="manageSpDialogFn"><img src="../../images/fcguanli.png" />管理</div>
                        <!-- 取消管理 -->
                        <div class="cancelManage" v-if="!spdialogflag">
                            <!-- <span>直接拖动可以调整顺序</span> -->
                            <span>已选中<i> {{checkimgnum}} </i>个视频</span>
                            <Checkbox v-model="allChooseVideoFlg"></Checkbox>
                            <span @click.stop="allChooseVideoFlg = !allChooseVideoFlg">全选</span>
                            <span @click.stop="delspbtn">删除</span>
                            <span @click.stop="manageSpDialogFn" class="bnt3">完成管理</span>
                        </div>
                    </div> 
                    <ul class="videoul" v-show="uploadsptk.length != 0">
                        <li  v-if="spdialogflag" v-for="(item,index) in uploadsptk" :class="spcurrentchoose[index]==true?'li lion':'li'">
                            <!-- <img src="../../images/choosevideo.png" class="choose" v-show="item.isUse == 1"/> -->
                            <img src="../../images/choosevideo.png" class="choose" v-show="spcurrentchoose[index]==true && item.isUse != 1"/>
                            <template v-if="item.status === 'uploading'">
                                <i-circle v-if="item.showProgress" :size="60" :percent="item.percentage" hide-info>
                                    <i class="demo-i-circle-inner" style="font-size:12px">{{filterfloat(item.percentage)}}</i>
                                </i-circle>
                            </template>
                            <template v-else>
                                <img :src="item.videoPicPath ?  (item.videoCoverStatus == 1 ? videoImg + item.videoPicPath : imgurl + item.videoPicPath)  : staticimg+'/images/blank3.png'"/>
                                <p class="fielname">{{item.videoName?item.videoName:'视频名称'}}</p> 
                                <div class="nocircle2" v-if="item.isUse == 1">
                                    <span>已使用</span>
                                    <span @click.stop="playvideo(item.videoPath)">预览</span>
                                </div>
                                <div class="nocircle" v-else>
                                    <span @click="userspbtn(item,index)" >{{spcurrentchoose[index]==true?'取消':'选择'}}</span>
                                    <span @click.stop="playvideo(item.videoPath)">预览</span>
                                </div>
                            </template>                        
                        </li>
                        <li v-for="(item,index) in uploadsptk"  v-if="!spdialogflag" :class="spcurrentchoose[index]==true?'li lion':'li'">
                            <img src="../../images/choosevideo.png" class="choose" v-show="spcurrentchoose[index]==true"/>
                            <img :src="item.videoPicPath ?  (item.videoCoverStatus == 1 ? videoImg + item.videoPicPath : imgurl + item.videoPicPath)  : staticimg+'/images/blank3.png'"/>
                            <p class="fielname">{{item.videoName?item.videoName:'视频名称'}}</p> 
                            <div class="nocircle">
                                <span @click="userspbtn(item,index)">{{spcurrentchoose[index]==true?'取消':'选择'}}</span>
                            </div> 
                        </li>          
                    </ul>
                     <!-- 缺省页 -->
                    <div class="notData" v-show="uploadsptk.length == 0">
                        <img  src="../../images/element_novideo.png"/>
                        <p>暂无数据</p>
                    </div>
                    <div class="pages">
                        <Page :total="mysparrtotal" :current="spCurrent" :page-size="12" @on-change="mysppagefn" v-show="uploadsptk.length != 0"></Page>
                        <div class="div">
                            <span class="cancel" @click="spModal=false">取消</span>
                            <span class="ok" @click="userspbtnsucFn(1)">确定</span>                            
                        </div>
                    </div>
                </div>
                <div v-if="!spRight"><!--视频最近使用-->
                    <div class="title"></div> 
                    <ul class="videoul" v-show="splocation.length != 0">
                        <li v-for="(item,index) in splocation" :class="spcurrentchoose[index]==true?'li lion':'li'">
                            <img src="../../images/choosevideo.png" class="choose" v-show="spcurrentchoose[index]==true"/>
                            <template v-if="item.status === 'uploading'">
                                <i-circle v-if="item.showProgress" :size="60" :percent="item.percentage" hide-info>
                                    <i class="demo-i-circle-inner" style="font-size:12px">{{filterfloat(item.percentage)}}</i>
                                </i-circle>
                            </template>
                            <template v-else>
                                <img :src="item.videoPicPath ?  (item.videoCoverStatus == 1 ? videoImg + item.videoPicPath : imgurl + item.videoPicPath)  : staticimg+'/images/blank3.png'"/>
                                <p class="fielname">{{item.videoName?item.videoName:'视频名称'}}</p> 
                                <div class="nocircle">
                                    <span @click.stop="playvideo(item.videoPath)">预览</span>
                                    <span @click="userspbtn(item,index)">{{spcurrentchoose[index]==true?'取消':'选择'}}</span>
                                </div>
                            </template>                        
                        </li>                     
                    </ul>
                     <!-- 缺省页 -->
                    <div class="notData" v-show="splocation.length == 0">
                        <img  src="../../images/element_novideo.png"/>
                        <p>暂无数据</p>
                    </div>
                    <div class="pages">
                        
                        <div class="div">
                            <span class="cancel" @click="spModal=false">取消</span>
                            <span class="ok" @click="userspbtnsucFn(2)">确定</span>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Modal>
   
    <div style=" 
    position: absolute;
    width: 71.5%;
    left: 541px;
    min-height: 100%;
    height: 100%;
    padding-top:60px;
    overflow-x: hidden;background-color:#D0D7DB;" class="clearfix">
    <div class="photoboxwarp">
        <div class="photobox">
            <div class="photocontent" @click.stop="hiddentextdialogFn" :style="'background:url('+imgpersonData+') 0% 0% / 100% 100% no-repeat;'">
                <!--个人简介-->
                <div :style="savedate.headerStyle" class="warpboxpannel" v-if="typeshow==1" @click="deldom($event)">
                    <!--头像-->
                    <img v-resize.savedate.moduleImageDivStyle.a.a.a.a="this" :style="savedate.moduleImageDivStyle" :src="savedate.headPictureSource?imgurl+savedate.headPictureSource:staticimg+'/images/blank5.png'" @click.stop="deldom($event,savedate,'headPictureSource','moduleImageDivStyle',1)"/>
                    <!--姓名v-resize.savedate.userName="this"-->
                    
                    <div v-resize.savedate.nameStyle="this" @keyup="maxlengthdiv($event,10)" :style="savedate.nameStyle" ref="nameStyle"  @click.stop="clicktext($event,savedate,'nameStyle','userName')" @blur="divblur($event,savedate,'userName','nameStyle')" v-text="savedate.userName"></div>
                    <!--出生日期-->
                    <div v-resize.savedate.introductionDayStyle="this"  @dblclick="dbclickFn($event,savedate,'introductionDayStyle')"  @click.stop="clicktext($event,savedate,'introductionDayStyle')" :style="savedate.introductionDayStyle"  ref="introductionDayStyle" v-text="birthdayTime3(savedate.cemeteryIntroduction.birthDay)+'-'+ birthdayTime3(savedate.cemeteryIntroduction.deadDay)"></div>
                    <!--个人简介-->
                    <div v-resize.savedate.introductionStyle="this" @keyup="maxlengthdiv($event,800)"  :style="savedate.introductionStyle" @dblclick="dbclickFn($event,savedate,'introductionStyle')"  @click.stop="clicktext($event,savedate,'introductionStyle','introduction')" ref="introductionStyle" @blur="divblur($event,savedate,'introduction','introductionStyle')" v-text="savedate.introduction"></div>			

                    <img class="imgclick" :src="imgurl+item.picSourcePath" @click.stop="clickimg($event,headerimage,index,'picStyle','templateModulePicDTO')" :style="item.picStyle" v-for="(item,index) in headerimage"  :index=index v-resize.headerimage.picStyle.savedate="_this">
                    <img :src="imgurl+item.videoPicSourcePath" @click.stop="clickimg($event,headersp,index,'videoStyle','templateModuleVideoDTO')" :style="item.videoStyle" v-for="(item,index) in headersp"  :index=index v-resize.headersp.videoStyle.savedate="_this">

                    <v-edittext :textflag="savedate.templateModuleContent":thistext="this" :maxlengthdiv="maxlengthdiv" :editclick="clickzdtext" :savedate="savedate" @emittext="emittext"></v-edittext>
                </div>
                <!--墓志铭-->
                <div :style="savedate.headerStyle" v-if="typeshow==2"  @click="deldom($event)">
                    <!--标题-->
                    <div v-resize.savedate.nameStyle="this"  @keyup="maxlengthdiv($event,10)" @blur="blurtextFn($event,savedate,savedate.moduleId)"  @dblclick="dbclickFn($event,savedate,'nameStyle')" :style="savedate.nameStyle" ref="nameStyle" @click.stop="clicktext($event,savedate,'nameStyle','moduleTitle')" v-text="savedate.moduleTitle"></div>
                    <!--内容-->
                    <div v-resize.savedate.epitaphStyle="this"  @keyup="maxlengthdiv($event,800)" :style="savedate.epitaphStyle" @dblclick="dbclickFn($event,savedate,'epitaphStyle')" @blur="divblur($event,savedate,'content','epitaphStyle')" @click.stop="clicktext($event,savedate,'epitaphStyle','content')" ref="epitaphStyle" v-text="savedate.content"></div>
                    <!--图片素材-->
                     <img class="imgclick" :src="imgurl+item.picSourcePath" @click.stop="clickimg($event,headerimage,index,'picStyle','templateModulePicDTO')" :style="item.picStyle" v-for="(item,index) in headerimage"  :index=index v-resize.headerimage.picStyle.savedate="_this">
                    <img :src="imgurl+item.videoPicSourcePath" @click.stop="clickimg($event,headersp,index,'videoStyle','templateModuleVideoDTO')" :style="item.videoStyle" v-for="(item,index) in headersp"  :index=index v-resize.headersp.videoStyle.savedate="_this">
                    <v-edittext :textflag="savedate.templateModuleContent":thistext="this" :maxlengthdiv="maxlengthdiv" :editclick="clickzdtext" :savedate="savedate" @emittext="emittext"></v-edittext>
               </div>
                <!--照片-->
                <div :style="savedate.headerStyle" v-if="typeshow==3">
                    <div>
                        <!--标题-->
                        <div :style="savedate.nameStyle">
                            <!--图标-->
                            <Tooltip content="单击替换图标" placement="right" :style="savedate.moduleIconStyle" class="changeIcon">
                                <img :src="imgurl+savedate.moduleIcon" @click.stop="icontitleFn('moduleIcon')" style="width: 24px;height: 24px;" />                            
                            </Tooltip>
                            <!--标题-->
                            <div :style="savedate.moduleTitleStyle" @click.stop="deldom($event,savedate,'moduleTitle')" @keyup="maxlengthdiv($event,10)"  maxlength="10" @blur="blurtextFn($event,savedate,savedate.moduleId)">{{savedate.moduleTitle}}</div>
                        </div>
                        <!--内容-->
                        <!--:style="savedate.moduleSwiperStyle"-->
                        <div @click.stop="imgdialogShow('headerStyle')" class="photoDivCon">
                            <div>					
                                <swiper :options="swiperOption" ref="mySwiper">
                                    <!-- 幻灯内容 -->
                                    <swiper-slide v-for="(item,index) in imagearr" @click.stop="deldom($event,imagearr,index)">								
                                        <div class="imgshow" ><img :src="imgurl+item.albumPath" :style="item.imageStyle"></div>								
                                    </swiper-slide>
                                </swiper>
                            </div>
                        </div>
                    </div>
                </div>
                <!--人生旅途-->
                <div :style="savedate.headerStyle" v-if="typeshow==4">
                    <div>
                     <!--标题-->
                    <div :style="savedate.nameStyle">
                        <!--图标-->
                        <Tooltip content="单击替换图标" placement="right" :style="savedate.moduleIconStyle" class="changeIcon">
                            <img :src="imgurl+savedate.moduleIcon" @click.stop="icontitleFn('moduleIcon')" style="width: 24px;height: 24px;" />                            
                        </Tooltip>
                        <!--标题-->
                        <div :style="savedate.moduleTitleStyle" @blur="blurtextFn($event,savedate,savedate.moduleId)"  maxlength="10" @keyup="maxlengthdiv($event,10)">{{savedate.moduleTitle}}</div>
                    </div>
                    <!--内容-->
                    <div>
                        <!--时间轴-->
                        <div :style="savedate.moduleSwiperStyle" @click.stop="sjzdialogShow(savedate.moduleSwiperDiv2Style)">
                            <swiper :options="rsOption">
                                <!-- 幻灯内容 -->
                                <swiper-slide v-for="(item,index) in reltdata" @click.stop="deldom($event,reltdata,index)">
                                    <div :style="savedate.moduleSwiperDivStyle">
                                        <p :style="savedate.moduleSwiperPStyle" class="tripConTime">{{stringfilter(item.startTime)+'-'+stringfilter(item.endTime)}}</p>
                                        <div :style="savedate.moduleSwiperDiv2Style"></div>
                                        <div v-if="iconcheckflag==index" class="tripConDot tripConDot1" @click.stop="rsltcheckFn(index)" :style="savedate.moduleSwiperIconStyle"><img :src="imgurl+savedate.moduleSwiperIcon0Path" /></div>
                                        <div v-else class="tripConDot tripConDot2" @click.stop="rsltcheckFn(index)" :style="savedate.moduleSwiperIconStyle"><img :src="imgurl+savedate.moduleSwiperIcon1Path" /></div>
                                    </div>
                                </swiper-slide>
						    </swiper>
                        </div>
                        <!--内容-->
                        <div :style="savedate.moduleContentStyle">{{Singlere.eventContent}}</div>
                        <!--图片-->
                        <div :style="savedate.moduleImageDivStyle" class="displayflex overflow" >
                            <img :src="Singlere.eventPicCutBig ? imgurl+Singlere.eventPicCutBig :staticimg+'/images/blank4.png'" :style="Singlere.imageStyle"/>
                        </div>
                    </div>
                    
                    </div>
                    
                </div>
                <!--作品集-->
                <div :style="savedate.headerStyle" :class="typeshow==6?'':'showDom'">
                    <div>
                    <!--标题-->
                    <div :style="savedate.nameStyle">
                        <!--图标-->
                        <Tooltip content="单击替换图标" placement="right" :style="savedate.moduleIconStyle" class="changeIcon">
                            <img :src="imgurl+savedate.moduleIcon" @click.stop="icontitleFn('moduleIcon')" style="width: 24px;height: 24px;" />    
                        </Tooltip>                       
                        <!--标题-->
                        <div :style="savedate.moduleTitleStyle" @keyup="maxlengthdiv($event,10)" @blur="blurtextFn($event,savedate,savedate.moduleId)"  maxlength="10">{{savedate.moduleTitle}}</div>
                    </div>
                    <!--内容-->
                    <div :style="savedate.moduleSwiperPStyle" class="workCon">
                        <swiper :options="zpOption"  ref="mySwiperA">
                            <!-- 幻灯内容 -->
                            <swiper-slide v-for="(item,index) in zpdata" @click.stop="deldom($event,zpdata,index)">
                                <div :style="savedate.moduleSwiperDivStyle " >
                                    <div :style="savedate.moduleImageDivStyle" style="display:flex;justify-content: center; align-items: center;overflow: hidden;"><img :src="imgurl+item.pictureCoverPath" :style="item.imageStyle"/></div>
                                    <p :style="savedate.moduleSwiperPStyle" class="workDivChange">
                                        {{item.worksName}}
                                    </p>
                                </div>
                            </swiper-slide>
                        </swiper>
                    </div>
                    </div>
                </div>
                <!--视频-->
                <div :style="savedate.headerStyle" :class="typeshow==5?'':'showDom'">
                    <div>
                    <!--标题-->
                    <div :style="savedate.nameStyle">
                        <!--图标-->
                        <Tooltip content="单击替换图标" placement="right" :style="savedate.moduleIconStyle" class="changeIcon">
                            <img :src="imgurl+savedate.moduleIcon" @click.stop="icontitleFn('moduleIcon')" style="width: 24px;height: 24px;" />    
                        </Tooltip> 
                        <!--标题-->
                        <div :style="savedate.moduleTitleStyle" @keyup="maxlengthdiv($event,10)" @blur="blurtextFn($event,savedate,savedate.moduleId)"  maxlength="10">{{savedate.moduleTitle}}</div>
                    </div>
                    <!--内容-->
                    <div :style="savedate.moduleSwiperStyle" @click.stop="imgdialogShow('headerStyle')">
                        <swiper :options="spOption" ref="mySwiperB">
                            <!-- 幻灯内容 -->
                            <swiper-slide v-for="(item,index) in spdata" @click.stop="deldom($event,spdata,index)" class="videoCon">
                                    <div :style="savedate.moduleImageDivStyle" class="videoConImg">
                                        <img :src="item.videoPicPath ?  (item.videoCoverStatus == 1 ? videoImg + item.videoPicPath : imgurl + item.videoPicPath)  : staticimg+'/images/blank3.png'"/>
                                        <div class="icon"></div>
                                    </div>
                                    <video :src="global+item.videoPath" v-show="false"></video>
                                    <p :style="savedate.moduleSwiperPStyle" class="videoConTitle">{{item.videoName}}</p>                                       
                            </swiper-slide>
                        </swiper>
                    </div>
                </div>
                </div>
            </div>
            <!--设置文本样式组件-->                
                <div class="setText" v-show="breviarytext" @click.stop="canCelSetText()">
                    <select  placeholder="默认字体" class="fontFamliy" v-model="breviarysytle.fontFamily">
                        <option v-for="item in fontFamilydata" :value="item.value" >{{ item.label }}</option>
                    </select>
                    <select  placeholder="字号" class="fontszie" v-model="breviarysytle.fontSize">
                        <option v-for="item in fontSizedata" :value="item.value" >{{ item.label }}</option>
                    </select>
                    <div class="colorChoose">
                        <img  src="../../images/edit_color.png" @click.stop="colorFn"/>
                        <div @click.stop="">
                            <sketch-picker  @change-color="onChange" v-show='textboxBg' v-model="textstyle"></sketch-picker><!--breviarysytle.color-->            
                        </div>
                    </div>
                    <div class="style">
                        <span class="blod" @click.stop="textboldFn"></span>
                        <span class="qx" @click.stop="textqxFn"></span>
                        <span class="xhx" @click.stop="textxhxFn"></span>
                        <span class="scx" @click.stop="textscxFn"></span>
                    </div>
                    <div class="style">
                        <span class="center">
                            <img class="img" src="../../images/edit_textaligned.png" @click.stop="alginflagFn"/>
                            <ul class="ul1" v-show="alginflag">
                                <li v-for="(item,index) in imgdata" @click.stop="checkimgdataFn(item.center)"><img :src="item.img"/>{{item.key}}</li>
                            </ul>
                        </span>
                        <span class="lineheight">
                            <img class="img" src="../../images/edit_linespacing.png" @click.stop="lhFn"/>
                            <ul class="ul2" v-show="lhflag">
                                <li v-for="(item,index) in lhdata" @click.stop="checklhdata(item)">{{item}}</li>
                            </ul>
                        </span>
                        <span class="lear">
                            <img class="img" src="../../images/edit_distance.png" @click.stop="learFn"/>
                            <ul class="ul3" v-show="learflag">
                                <li v-for="(item,index) in leardata" @click.stop="checklearFn(item)">{{item}}</li>                 
                            </ul>
                        </span>
                    </div>
                    <div class="style">
                        <span class="clear" @click="clearstyleFn"></span>
                    </div>
                </div>
        </div>
        
        <!--操作栏目-->
        <div class="photoboxRight" v-if="(typeshow==1||typeshow==2)&&wrapright">
            <Tooltip content="撤销操作，最多可撤销10步" placement="right">
                <p class="p1" @click.stop="advancebtnFN" ></p>
            </Tooltip>
            <Tooltip content="重做到当前" placement="right">
                <p class="p2" @click.stop="qjFN"></p>
            </Tooltip>
            <Tooltip content="播放预览" placement="right">
                <p class="p3" @click.stop="bfylFn">
                </p>
            </Tooltip>
            <Tooltip content="置顶当前模块" placement="right">
                <p class="p4" @click.stop="zdFn"></p>
            </Tooltip>
            <Tooltip content="元素对齐" placement="right">
                <p class="p5" @click.stop="divcenterFn"></p>
            </Tooltip>
            <Tooltip content="元素旋转" placement="right">
                <p v-if="typeshow==1||typeshow==2" class="p10" @click.stop="tranfrommobileFn"></p>
                <p v-else class="p10"></p>
            </Tooltip>
            <Tooltip content="删除元素" placement="right">
                <p class="p6" @click.stop="deldomFn"></p>
            </Tooltip>
            <Tooltip :content="musicName==null?'背景音乐':musicName" placement="right" :class="musicName==null?'p7toop':'p7toop p7toopSet'">
                <p :class="musicName==null?'p7':'p7Set' " @click.stop="musicFn"></p>
            </Tooltip>
            <Tooltip content="添加背景" placement="right">
                <p class="p8" @click.stop="imgphototype(3)"></p>
            </Tooltip>
        </div>
        <!-- 未选中元素情况下操作栏状态 -->
        <div class="photoboxRight" v-else-if="(typeshow==1||typeshow==2)&&!wrapright">
            <Tooltip content="撤销操作，最多可撤销10步" placement="right">
                <p class="p1" @click.stop="advancebtnFN" ></p>
            </Tooltip>
            <Tooltip content="重做到当前" placement="right">
                <p class="p2" @click.stop="qjFN"></p>
            </Tooltip>
            <Tooltip content="播放预览" placement="right">
                <p class="p3" @click.stop="bfylFn">
                </p>
            </Tooltip>
            <p class="p4Not"></p>
            <p class="p5Not"></p>
            <p class="p10Not"></p>
            <p class="p6Not"></p>
            <Tooltip :content="musicName==null?'背景音乐':musicName" placement="right" :class="musicName==null?'p7toop':'p7toop p7toopSet'">
                <p :class="musicName==null?'p7':'p7Set' " @click.stop="musicFn"></p>
            </Tooltip>
            <Tooltip content="添加背景" placement="right">
                <p class="p8" @click.stop="imgphototype(3)"></p>
            </Tooltip>
        </div>
        <!-- 其他模块下操作栏状态 -->
        <div class="photoboxRight" v-else>
            <p class="p1Not"></p>
            <p class="p2Not"></p>
            <Tooltip content="播放预览" placement="right">
                <p class="p3" @click.stop="bfylFn">
                </p>
            </Tooltip>
            <p class="p4Not"></p>
            <p class="p5Not"></p>
            <p class="p10Not"></p>
            <p class="p6Not"></p>
            <Tooltip :content="musicName==null?'背景音乐':musicName" placement="right" :class="musicName==null?'p7toop':'p7toop p7toopSet'">
                <p :class="musicName==null?'p7':'p7Set' " @click.stop="musicFn"></p>
            </Tooltip>
            <p class="p8Not"></p>
        </div>
        <!--单双墓穴切换-->
        <div class="photoboxLeft">
            <div :class='{on:index==dscheckactive}' v-for="(item,index) in doubleCemeteryList" @click.stop="checkdsx(item,index)">{{item.userName}}</div>
        </div>
        
    </div>
    
    <!--ICON组件弹层-->
    <div class="iconModule" v-if="iconflag" @click.stop="">
        <div class="title">ICON素材<span @click.stop="closeiconFn"></span></div>
        <!--内容-->
        <div class="content">
            <div v-for="(item,index) in tempimgdata" @click.stop="iconclickFn(index)"><img :src="imgurl+item"/></div>
        </div>
    </div>
    </div>
    <Modal
        v-model="editimgdialog" @on-cancel="editcancelbtn()"
        title="编辑照片信息" class="photoInfoEdit" width="600">
        <Form :model="formLeft" label-position="left" :label-width="48">
            <Form-item label="名称" class="f1">
                <Input v-model="editdialogsubdata.albumName" placeholder="请输入名称" :maxlength="30"></Input>
            </Form-item>
            <Form-item label="描述" class="f2">
                <Input v-model="editdialogsubdata.albumDesc" type="textarea" placeholder="请输入图片描述" :maxlength="200"></Input>
            </Form-item>
            <Form-item label="权限">
                <Radio-group v-model="editdialogsubdata.authorityLevel">
                    <Radio label="2">公开</Radio>
                    <Radio label="1">仅自己可见</Radio>
                </Radio-group>
            </Form-item>
        </Form>
        <div class="bottom">
            <Button type="warning" @click.stop="editsavebtn(editdialogsubdata.id)" class="ok">保存</Button>
            <Button type="text" @click.stop="editcancelbtn" class="cancel">取消</Button>        
        </div>
    </Modal>
    <!-- 上传视频弹窗 -->
    <Modal v-model="uploadVideoModal" @on-cancel="spFn"
        title="上传视频" width="600" class="photoInfoEdit videoInfoEdit">
        <div class="clearfix">
            <div class="left">
                <i-circle v-if="!spdialog" :size="60" :percent="progress" hide-info  trail-color="#fff" stroke-color="#FE9333" style="margin-left:100px;">
                    <i class="demo-i-circle-inner" style="font-size:12px;font-style: normal;">{{filterfloat(progress)}}</i>
                </i-circle>
                <div class="img" v-else>
                    <img :src="staticimg+'/images/blank3.png'"  >
                </div>
            </div>
            <div class="right">
                <Form :model="formLeft" label-position="left" :label-width="48" >
                    <Form-item label="名称">
                        <Input v-model="videoinfo.videoName" :maxlength="30" placeholder="请输入视频名称"></Input>
                    </Form-item>
                    <Form-item label="描述">
                        <Input v-model="videoinfo.videoDesc" type="textarea" placeholder="请输入描述信息" :maxlength="200"></Input>
                    </Form-item>
                </Form>
            </div>
        </div>
         <div class="bottom">
            <Button type="warning" v-if="spdialog" @click.stop="uploadFn" class="ok">上传</Button>
            <Button type="text" v-if="spdialog" @click.stop="spFn" class="cancel">取消</Button>   
            <!-- 取消上传 -->
            <Button type="warning" v-if="!spdialog" @click.stop="canspbtnFN" class="ok">取消上传</Button>            
        </div>
    </Modal>
    <!-- 上传视频成功之后的提示弹窗 -->
    <Modal v-model="uploadVideoSuccess" @on-cancel="editspaddbtncannal"
        title="上传视频" width="600" class="photoInfoEdit videoInfoEdit">
        <div class="clearfix">
            <div class="left">
                <div class="img">
                    <img :src="videoinfo.videoPicPath ?  (videoinfo.videoCoverStatus == 1 ? videoImg + videoinfo.videoPicPath : imgurl + videoinfo.videoPicPath)  : staticimg+'/images/blank3.png'"  >
                </div>
                <Button type="ghost"  @click="WebuploadFn(videoinfo.videoPicPath,global+'/cemetery/template/video/fileUploadByFileStream?cemeteryId='+cemeteryId,'file',spfm1,1,'上传一张照片作为视频封面，格式为JPEG、PNG。')" class="btn btn1">上传封面</Button>
            </div>
            <div class="right">
                <Form :model="formLeft" label-position="left" :label-width="48" >
                    <p class="successP1">视频上传成功！</p>
                    <p class="successP2">视频已经上传成功，正在审核中，通过审核的视频才能查看，先上传视频封面以及设置权限吧。</p>
                    <Form-item label="权限">
                        <Radio-group v-model="videoinfo.authorityLevel">
                            <Radio label="2">公开</Radio>
                            <Radio label="1">仅自己可见</Radio>
                        </Radio-group>
                    </Form-item>
                </Form>
            </div>
        </div>
         <div class="bottom">
            <Button type="warning" @click.stop="editspaddbtn" class="ok">确定</Button>
            <Button type="text" @click.stop="editspaddbtncannal" class="cancel">取消</Button>        
        </div>
    </Modal>
    <Modal
        v-model="editspdialog"
        title="编辑视频信息" width="600" class="photoInfoEdit videoInfoEdit" @on-cancel="ischangeFm = true">
        <div class="clearfix">
            <div class="left">
                <div class="img">
                    <img :src="editspsingle.videoPicPath ?  (editspsingle.videoCoverStatus == 1 ? videoImg + editspsingle.videoPicPath : imgurl + editspsingle.videoPicPath)  : staticimg+'/images/blank3.png'"  >
                </div>
                <Button type="ghost"  @click="WebuploadFn(editspsingle.videoPicPath,global+'/cemetery/template/video/fileUploadByFileStream?cemeteryId='+cemeteryId,'file',spfm,1,'选择上传一张人生旅途事件图片，清晰展现人生旅途风采，图片格式为JPEG、PNG。')" class="btn btn1">上传照片</Button>
            </div>
            <div class="right">
                <Form :model="formLeft" label-position="left" :label-width="48" >
                    <Form-item label="名称">
                        <Input v-model="editspsingle.videoName" :maxlength="30"></Input>
                    </Form-item>
                    <Form-item label="描述">
                        <Input v-model="editspsingle.videoDesc" type="textarea" placeholder="请输入描述信息" :maxlength="200"></Input>
                    </Form-item>
                    <Form-item label="权限">
                        <Radio-group v-model="editspsingle.authorityLevel">
                            <Radio label="2">公开</Radio>
                            <Radio label="1">仅自己可见</Radio>
                        </Radio-group>
                    </Form-item>
                </Form>
            </div>
        </div>
         <div class="bottom">
            <Button type="warning" @click.stop="editspsavebtn(editspsingle.id)" class="ok">保存</Button>
            <Button type="text" @click.stop="editspdialog=false" class="cancel">取消</Button>        
        </div>
    </Modal>
	<my-upload field="file"
        @crop-success="cropSuccess"
        @crop-upload-success="cropUploadSuccess"
        @crop-upload-fail="cropUploadFail"
        :crop=false
        v-model="show"
		:width="260"
		:height="350"
        :value=false
		:url="global+'/cemetery/template/introduction/fileUploadByFileStream'"
		:params="params"
		:headers="tokendata"
		img-format="png"></my-upload>
    <!-- 其他设置修改图片封面 -->
    <my-upload field="file"
        @crop-upload-success="cropUploadSuccess2"
        :crop=false
        :value=oneWay
        v-model="qtshow"
        :width="140"
        :height="140"
        :url="global+'/common/template/upload'"
        :params="params"
        :headers="tokendata"
        img-format="png"></my-upload>
    <!-- 作品封面上传图片 -->
    <my-upload field="file"
        @crop-upload-success="uploadWorkSuccess"
        :crop=false
        :value=oneWay
        v-model="uploadWorkModal"
        :width="100"
        :height="134"
        :url="global+'/cemetery/template/works/fileUploadByFileStream?cemeteryId='+cemeteryId"
        :params="params"
        :headers="tokendata"
        img-format="png"></my-upload>
    <!--上传视频结果回调-->
    <Modal v-model="vedioafter" class="findafter" width="600" >
        <!--上传成功-->
        <div v-if="vedioShow" class="findafter-div">
            <img src="../../images/success.png" />
            <p class="success">视频上传成功！</p>
            <p>视频已上传成功，正在审核中，通过审核的视频才能查看，请稍后再来</p>
        </div>
        <!--上传失败-->
        <div v-if="!vedioShow" class="findafter-div">
            <img src="../../images/failed.png" />
            <p class="success error">视频上传失败！</p>
            <p>您的网速已断片，请重新上传～</p>
        </div>
	</Modal>
    <!--选择墓穴类型-->
    <Modal v-model="choosetype" class="choosetype" width="560"title="墓穴类型选择"  :mask-closable="false"  :closable="false">
        <div class="info">
            <!--单人穴-->
            <div @click.stop="chooseOneType()" class="div">
                <div :class="oneType"></div>
                <p>单人穴</p>
            </div>
            <!--双人穴-->
            <div @click.stop="chooseTwoType()" class="div">
                <div :class="doubleType"></div>
                <p>双人穴</p>
            </div>
        </div>
        <div class="bottom">
            <Button type="warning" class="ok"  @click.stop="setmxtype()">确定</Button>            
            <Button type="text" class="cancel" @click.stop="backmbchoose()">取消</Button>
        </div>
	</Modal>
    <div v-show="visible" class="bigwrapbox">
        <div>
            <div class="bigwrapboxShow">
                <div @click="smailleftclick" class="left"></div>
                <div class="div">
                    <img :src="imgurl+ bigImgurl" :style="bigImgstyle">
                    <div class="close" @click="visible=false"></div>
                </div>
                <div @click="smailrightclick" class="right"></div>
            </div>
            <div class="bigswiperwrap">
                <swiper :options="bigswiperOption" ref="bigswipername" :attr="index">
                    <!-- 幻灯内容 -->
                    <swiper-slide v-for="(items,index) in bigimagearr ">								
                        <div :class="pageindex==index?'imgshow on':'imgshow'" @click.stop="bigImgclick(items.albumPath,items.imageStyle,index)"><img :src="imgurl+items.albumPath" :style="items.imageStyle" ></div>								
                    </swiper-slide>
                </swiper>
                <div class="bigswiperwrapNext"></div>
                <div class="bigswiperwrapPrev"></div>
            </div>
        </div>
    </div>
    <Modal title="播放视频" v-model="visibleVideo" @on-cancel="suspendVideo()">
        <video ref="videoDom" :src="videourl+playvideourl" controls="controls" width="485" height="300" style="margin-left:17px;"></video>
        <div slot="footer">
        </div>
    </Modal>
    <!-- </Modal> -->
    <v-imgupload
        @imguploadcallback="imguploadFn"
        @imguploadcallbackS="imgSessionIdFun"
        :imgloadflag="imgloadflag"
        :onsuccess="imgFn"
        :tokendata="tokendata" 
        :name="imagename"
        :num="num"
        :textinfo="textinfo"
        :action="imgaction">
    </v-imgupload>
    <Modal title="查看图片" v-model="imgPreview">
        <div style="height:400px;justify-content: center;align-items: center;display: flex;overflow: hidden;margin-top:20px;">
            <img :src=" imgurl+ imgPreviewUrl" :style="imgPreviewStyle">
        </div>
        <div slot="footer" style="display:none;"></div>
    </Modal>
    <!-- 修改模块名称弹窗 start -->
    <Modal title="修改模块名称" width="380" v-model="changeModoName" class="changeModoClass">
        <div class="div">
            <input type="text" v-model="changeModoInput" class="ivu-input" placeholder="请输入模块名称" maxlength="10"/>
        </div>
        <div slot="footer">
            <div class="clearfix">
                <div class="submit" @click.stop="changeModoNameFun">确定</div>
                <div class="cancel" @click.stop="changeModoName = false">取消</div>
            </div>            
        </div>
    </Modal>
    <!-- 修改模块名称弹窗 end -->
    <!-- 作品编辑弹窗 start-->
    <div class="editWorksPop" v-show="editWorksShow">
        <!-- 标题操作 -->
        <div class="title">
            <div class="left" @click="backWorksList"><img src="../../images/usercenter_news_back.png" />返回列表</div>
            <div class="right">
                <span class="s1" @click.stop="workPreviewFun">预览</span>
                <span v-if="zpsingledata.worksName.length != 0 && zpsingledata.creativeTime.length != 0 && zpsingledata.pictureCoverPath " class="s2" @click.stop="saveaddzp(zpsingledata.id)">保存</span>
                <span class="s3" @click.stop="" v-else>保存</span>
            </div>
        </div>
        <!-- 时间、封面、名称 -->
        <div class="middle">
            <div class="d1">
                <span>作品名称</span>
                <div class="name" >
                    <Input ref="modelFocusFour" type="text" placeholder="请输入作品名称" v-model="zpsingledata.worksName" style="width:540px;margin-right:30px;" :maxlength="28">{{zpsingledata.worksName.length}}</Input>
                    <p><span>{{zpsingledata.worksName.length}}</span> / 28</p>
                </div>
                <span>作品时间</span>
                <Date-picker type="date" :value="zpsingledata.creativeTime" @on-change="handleChangezp" @on-clear="handleChangezp" placeholder="请选择作品时间" :editable="false" style="width:260px;display: inline-block;"></Date-picker>
            </div>
            <div class="d2 clearfix">
                <span>作品图片</span>
                <div class="img">
                    <img :style="zpsingledata.imageStyle" :src="zpsingledata.pictureCoverPath ? imgurl+zpsingledata.pictureCoverPath :staticimg +'/images/blank5.png'">
                </div>
                <div class="handle">
                    <p>请上传一张图片作为作品封面图，格式为JPEG、PNG。</p>
                    <!-- <div ref="addwork" @click="WebuploadFn(zpsingledata.pictureCoverPath,global+'/cemetery/template/works/fileUploadByFileStream?cemeteryId='+cemeteryId,'file',handleSuccesszp,1,'请上传一张图片作为作品封面图，格式为JPEG、PNG。')">更换封面</div> -->
                    <div ref="addwork" @click="uploadWorkImg">更换封面</div>             
                </div>
            </div>
            <!-- 富文本内容编辑区域 -->
            <div>
                <v-UEditor :ueditorConfig="ueditorConfig"  @ready="editorReady"></v-UEditor>
                 <!-- <quill-editor v-model="zpsingledata.worksContent" ref="myTextEditor"  :options="editorOption">
                        <div id="toolbar" slot="toolbar">
                            <span class="ql-formats" title="插入图片">
                                <Upload 
                                :action="global+'/cemetery/template/works/upload'" 
                                name="pic" 
                                :headers="tokendata"
                                :show-upload-list=false
                                :on-success="fwbFN" 
                                :format="['jpg','jpeg','png']"
                                :on-format-error="uploadPhotoError"
                                >
                                    <button type="button" @click="imgClick">
                                        <svg viewBox="0 0 18 18">
                                            <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect>
                                            <circle class="ql-fill" cx="6" cy="7" r="1"></circle>
                                            <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline>
                                        </svg>
                                    </button>
                                </Upload>                       
                            </span>
                            <span class="ql-formats"><button type="button" class="ql-bold" title="字体加粗"></button></span>
                            <span class="ql-formats" title="字体大小">
                                <select class="ql-header">
                                <option value="1"></option>
                                <option value="2"></option>
                                <option value="3"></option>
                                <option value="4"></option>
                                <option value="5"></option>
                                <option value="6"></option>
                                <option selected="selected"></option>
                                </select>
                            </span>
                            <span class="ql-formats" title="对齐方式">
                                <select class="ql-align">
                                    <option selected="selected"></option>
                                    <option value="center"></option>
                                    <option value="right"></option>
                                    <option value="justify"></option>
                                </select>
                            </span>
                        </div>
                    </quill-editor>  -->
            </div>
        </div>
    </div>
    <!-- 作品编辑弹窗 end-->
    <!-- 人生旅途编辑窗口 start-->
    <Modal title="编辑事件" width="360" @on-cancel="closeEditTrip" :mask-closable="false" v-model="editTrip" class="editTripPop">
        <div class="content">
            <!-- 图片 -->
            <div class="d1">
                <div class="img">
                    <img :style="Singlere.imageStyle" :src="Singlere.eventPicCutBig ? imgurl+Singlere.eventPicCutBig :staticimg+'/images/blank4.png'"/>
                </div>
                <div class="handle">
                    <p>上传一张人生旅途事件图片，清晰展现人生旅途风采。图片格式为JPEG、PNG。</p>
                    <div ref="rslvdialog" @click="WebuploadFn(Singlere.eventPicCutBig,global+'/cemetery/template/lifeJourney/fileUploadByFileStream?moduleId='+mkid+'&cemeteryId='+cemeteryId,'file',handleSuccessrs,1,'选择上传一张人生旅途事件图片，清晰展现人生旅途风采，图片格式为JPEG、PNG。')">上传图片</div>
                </div>
            </div>
            <div class="d2 clearfix">
                <p>起止年份</p>
                <div class="clearfix d2d">
                    <Date-picker  style="width:140px;float:left;" type="year" :value="Singlere.startTime"  @on-change="handleChangerStart" placeholder="选择日期" :editable="false" :clearable="false"></Date-picker>
                    <div style="float:left;width:20px;text-align:center;line-height:36px;">-</div>
                    <Date-picker  style="width:140px;float:left;" type="year" :value="Singlere.endTime"  @on-change="handleChangerEnd" placeholder="选择日期" :editable="false" :clearable="false"></Date-picker>    
                </div>               
                <p>事件说明</p>
                <textarea   placeholder="请输入时间说明" class="ivu-input" v-model="Singlere.eventContent" maxlength="150" ></textarea>
            </div>                    
        </div>
        <div slot="footer">
            <div class="footer">               
                <div class="submit" @click.stop="saverslt(2)" v-if="Singlere.eventPicCutBig != undefined && Singlere.eventPicCutBig != '' &&  Singlere.startTime != undefined && (/\S+/.test(Singlere.eventContent)) && Singlere.startTime !='' && Singlere.endTime !=undefined && Singlere.endTime != ''">保存</div>
                <div class="submit" style="background: rgba(42,42,42,0.4);" @click.stop="" v-else>保存</div>
            </div>            
        </div>
    </Modal>
    <!-- 人生旅途编辑窗口 end-->
    <!-- 作品预览弹窗 start -->
    <div class="workPreview" v-if="workPreviewFlg">
        <div class="data">  
            <div class="close" @click="workPreviewFlg=false;"></div>
            <div class="con">
                <p class="title">{{zpsingledata.worksName}}</p>
                <p class="time">{{'作品时间: ' +zpsingledata.creativeTime}}</p>
                <div class="conDiv" v-html="zpsingledata.worksContent"></div>
            </div>
        </div>
    </div>
    <!-- 作品预览弹窗 end -->
    <!-- 预览弹窗 -->
    <v-preview v-if="previewFlag" @rsltcheckFn="rsltcheckFn":reltdata="reltdata" :iconcheckflag="iconcheckflag" ref="preview" :Singlere="Singlere" :musicPathPre="musicPathPre" :musicPathStatus="musicPathStatus" @photoFN="photoFN" :dscheckactive="dscheckactive" :cemeteryId="cemeteryId" :doubleCemeteryList="doubleCemeteryList" :checkdsx="checkdsx" :headerstyle="headerstyle" :birthdayTime="birthdayTime3" :birthDayAnd="birthDayAnd" :imgurl="imgurl" @previewFN="previewFN" @ismusicPlayFn="ismusicPlayFn" :musicurl="musicurl" :ismusicPlay="ismusicPlay" :phoneShow="phoneShow"></v-preview>
    <v-editFeedback ref="editFeedbackRef" :backModalType="backModal" @backModalTypeFun="showBackModal"  @openEditCourseFun="openEditCourseFun"></v-editFeedback>
    <v-editCourse :openEditCourse="openEditCourseFlg" @openEditCourseFun="openEditCourseFun"></v-editCourse>
    
</div>
</template>


<script>
    import {Sketch} from 'vue-color';
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import myUpload from 'vue-image-crop-upload/upload-2.vue';
    //import VueCoreImageUpload from 'vue-core-image-upload';//传XY轴
    import global from '../../config/global';
    import draggable from 'vuedraggable';
    import '../../js/dragandresize.js';
    import { mapState } from 'vuex';
    import { focus } from 'vue-focus'
    var isJSON = require('is-json');  //如果判断是JSON
    // import '../../js/jquery-2.2.4.min.js'
    // import '../../js/webuploader.js'
    // import '../../js/upload.js'
    export default {
		data() {
			return {
                editorOption:{
                    modules: {
                        toolbar: "#toolbar",
                    },
                    placeholder:"请输入作品描述"
                },
                optionsstart:{
                    disabledDate:(date)=>{
                        return date && date.valueOf() >= this.savedate.cemeteryIntroduction.deadDay - 86400000;
                    }
                },
                optionsend:{
                    disabledDate:(date)=>{
                        return date && date.valueOf() <= this.savedate.cemeteryIntroduction.birthDay - 86400000;
                        
                    }
                },
                tripStartTime:{
                    disabledDate:(date)=>{
                        return date && date.getFullYear() > this.Singlere.endTime ;
                    }
                },
                tripEndTime:{
                    disabledDate:(date)=>{
                        return date && date.getFullYear() < this.Singlere.startTime ;
                    }
                },
                ismusicPlay:true,
                queryflag:false,
                imgstatus:{},
                pagenum:1,
                musiclocalStorage:[],
                pageindex:1,
                chooseLeftIndex:0,
                openEditCourseFlg:false,//打开教程参数
                rslvflag:true,//新增人生旅途快速点击
                backModal:false,
                globalflag:false,
                progress:0,//视频进度条
                videoinfo:{"videoName":"","videoDesc":"","videoPicPath":"","authorityLevel":2,"id":""},
                staticimg:global.staticimg,
                imgurl:global.imgurl,
                videourl:global.videourl,
                videoImg:global.videoImg,
				musicurl:global.musicurl,
                bgimg:"",
                btbglist:"",
                biaotiflag:false,
                stylefour:"",//四模块样式
                imgloadflag:false,
                num:"",
                sessionId:"",
                imagedate:"",
                imagename:"",
                imgaction:"",
                uploader:"",
                musicName:"",
                musicUseId:"",
                musicPath:"",
                dscheckactive:0,
                myspdataindex:1,
                status:"",//草稿箱状态
                headerstyle:[],
                editflag:false,
                textboxBg:false,//文字颜色选色框
                breviarytext:false,//缩略文本框组件
                textstyle:"",
                alginflag:false,//显示居中类型
                lhflag:false,//行高显示隐藏
                learflag:false,//字间距显示隐藏
                checkimgdata:"",//当前选中的居中类型
                imgdata:[
                    {
                        img:require("../../images/edit_textaligned_alignleft.png"),
                        key:"左对齐",
                        center:"left"
                    },
                    {
                        img:require("../../images/edit_textaligned_aligncenter.png"),
                        key:"居中对齐",
                        center:"center"
                    },
                    {
                        img:require("../../images/edit_textaligned_alignright.png"),
                        key:"右对齐",
                        center:"right"
                    }
                ],
                lhdata:[6,7,8,9,11,12,14,16,18,20,28,36,48,72],//行高DATA
                leardata:[6,7,8,9,11,12,14,16,18,20,28,36,48,72],//字间距DATA
                breviarysytle:{
                    "fontFamliy":"",
                    "fontSize":"",
                    "color":"",
                    "fontWeight":"",
                    "fontStyle":"",
                    "textDecoration":"",
                    "textAlign":"",
                    "lineHeight":"",
                    "letterSpacing":""
                },
                fontFamilydata:[{"value":'SimSun',"label":'宋体'},{"value":'SimHei',"label":'黑体'},{"value":'Microsoft YaHei',"label":'微软雅黑'}],
                fontSizedata:[
                    {"value":'12px',"label":'12px'},
                    {"value":'13px',"label":'13px'},
                    {"value":'14px',"label":'14px'},
                    {"value":'16px',"label":'16px'},
                    {"value":'18px',"label":'18px'},
                    {"value":'20px',"label":'20px'},
                    {"value":'24px',"label":'24px'},
                    {"value":'32px',"label":'32px'},
                    {"value":'48px',"label":'48px'},
                    {"value":'64px',"label":'64px'},
                    {"value":'96px',"label":'96px'},                    
                    ],
                spdata:"",//视频数据
                mysparr:[],//我的视频数据列表
                mysparrtotal:1,
                typeshow:"",//显示不同模版
                muid:"{cemeteryId:1908}",
                cemeteryId:"",
                tempimgdata:"",//icon图片数据
                tempimgdatahui:"",//icon灰图片数据
                imagearr:[],//图片数据
                imagearrclone:[],
                spdataClone:[],
                reltdata:[],//人生旅途列表数据
                Singlere:{
                    moduleId:"",
                    cemeteryId:"",
                    eventContent:"",
                    endTime:"",
                    startTime:"",
                    id:"",
                    eventPicCutBig:"",
                    startTimeAndEndTime:""
                },//点击编辑人生数据
                zpdata:"",//作品列表数据
                zpsingledata:{   
                    "creativeTime":"",
                    "worksName":"",
                    "worksContent":"",
                    "pictureCoverPath":"",
                    "id":"",
                    "cemeteryId":"",
                    "imgstyle":""
                },//作品单个数据
                editimgdialog:false,
                editdialogsubdata:"",
                global:"",
                customstyle:[{width:"50px"}],
                deldomdata:"",//删除当前元素
                deldomstyle:"",
                domdata:"",
                params:{
                    loginName:"",
                    password:""
                },
                delflag:true,//删除自定义的=false/删除基础数据=true
				show: false,
                editspdialog:false,//编辑信息弹窗
                texthide:false,//文本框显示隐藏
                imghide:false,//图片集设置组件
                sjzhide:false,//时间轴组件
                uploadWorkModal:false,
                currentel:"",//当前的元素
                currentelstr:"",
                fontSize:"",
                formItem:"",
                optionstime1:"",
                titletext:"asdfadsf",
                commSweepTemplateModuleDTOs:"",
                id:"",//墓主ID
                tokendata:"",
                templateid:"",
                colortext:"",//色值颜色
                myspflag:"",//根据这个值判断点的是那个视频按钮
                spdialog:true,
                savedate:{
                    "cemeteryId":'',
                    "userName":'',
                    "headPictureSource":'',
                    "headPictrureThumbnail":'',
                    "headPicture":'',
                    "headPictrureBig":'',
                    "tid":'',
                    "birthDay":"",
                    "deadDay":"",
                    "introduction":"",
                    "nameStyle":"",
                    "introductionStyle":"",
                    "introductionDayStyle":"",
                    "headPicture":"",
                    "picIds":"",
                    "picSourcePaths":""
                },
                imgpersonData:"",//个人头像
                mzbid:"",
                mkid:"",
                templacefglist:"",//模块风格列表
                subtemplacefg:"",//模块风格提交参数
                templacetypelist:"",//模块类型列表
                subtemplacetype:"",//模块类型提交参数
                moduleName:"",//模块名字
                moduleHtml:[],
                deltemplaceindex:0,
                selecttemplacelist:"",//查询模版列表
                photoModal:false,//照片弹窗
                spModal:false,//照片弹窗
                topClass:"topP on",//音乐弹窗样式
                topClass2:"topP",//图片素材弹窗
                topClass3:"topP",//音乐弹窗样式
                topClass4:"topP",//
                photoRight:true,//
                spRight:true,
                cloudphotoRight:false,
                syrimagearr:[],//所有人图片库
                syrimagearrtotal:1,
                myimagearr:[],
                myimagearrtotal:1,
                imagetype:"",//图片素材类型
                imageName:"",
                imagetypedataindex:"",
                newModule:'newModule',//新加模块
                changeModule:'newModule',//更换模板
                editspsingle:"",//视频单个数据
                photoimgtype:"",//1照片集2头部上面的图片集3456
                bigswiperOption:{
                    slidesPerView:10,
                    slidesPerColumn: 1,
                    nextButton: '.bigswiperwrapNext',
                    prevButton: '.bigswiperwrapPrev',
                },//照片集轮播
                bigimagearr:[],
                spflag:false,
                swiperOption:{
                    slidesPerView:3,
                    slidesPerColumn: 1,
                },
                rsOption:{//人生旅轮播修改
					slidesPerView:2,											
				},
                zpOption:{
                    step:3,
                    slidesPerView:3,
                    slidesPerColumn: 3,
                    slidesPerColumnFill:'row',
                },
                zdindex:1100,
                spOption:{
                   slidesPerView:1,
                   slidesPerColumn: 2,
                   slidesPerColumnFill:'column'
                },
                headerimage:[],//点头部的图片插入的数据
                zpindex:"",//点的是那个作品
                spindex:"",
                editspindex:"",//编辑封面当前INDEX
                checkrslvindex:"",//编辑人生旅途当前INDEX
                headersp:[],//点头部的视频插入的数据
                zddom:"",
                vedioafter:false,//视频长传成功之后的弹窗
                vedioShow:'',//视频上传成功
                advancedata:[],
                backdata:[],
                advanceindex:0,
                advancedatatemp:"",
                iconflag:false,
                iconcheckflag:0,//人生旅途当前状态
                iconcheckstr:"",//判断那个是点了ICON
                currenticon:"",//当前的ICON图标
                bfyldata:"",//二维码
                bfyldataflag:false,
                datastyleFN:"",
                _this:"",
                choosetype:false,//选择墓穴类型
                oneType:"oneType2",//单人穴样式
                doubleType:"doubleType1",//
                graveType:"1",
                changeModuleS1:"on",
                changeModuleS2:"",
                imgdialogflag:true,
                spdialogflag:true,
                defaultList: [
                    {
                        'name': 'a42bdcc1178e62b4694c830f028db5c0',
                        'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
                    },
                    {
                        'name': 'bc7521e033abdd1e92222d733590f104',
                        'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
                    }
                ],
                bigImgurl: '',
                bigImgstyle:"",
                visible: false,
                uploadlist:[],
                uploadwu:[],
                uploadsptk:[],
                spdata:[],
                uploadzpgrtx:[],
                musicPathPre:"",
                textindex:"",//当前索引
                textzddata:"",//自定义当前字段
                managePhoto:false,//照片管理样式
                allChooseImgFlg:false,//图片素材管理全选状态值
                allChooseVideoFlg:false,//视频素材-我的上传-全选状态管理
                isChooseimg:[],
                isChooseimgNum:0,
                isMyChooseImg:[],
                photoids:[],
                photoAllchoose:false,
                playvideourl:'',
                visibleVideo:false,
                templacelistPage:0,
                templacelistNot:true,
                photocurrent:1,
                myimgdata:1,//我的上传图片当前页
                rsltstyle:"",
                isClick:false,
                tongyongflag:"",//是否显示通用弹窗组件
                accountType:0,//是否是管理员 0 不是 1是
                chooseimgtype:0,//图片素材 （图片库）图片分类
                imagearrtotal:1,//照片集总数
                managePhotoPage:1,//管理照片 的当前页码
                biaotifnTotal:1,
                textdblclick:"",
                imgCurrent:1,
                btCurrent:1,//标题图片当前页
                spCurrent:1,//视频当前页
                imageCurrent:1,//照片集当前页
                customized:"",//是否是电子墓碑
                imgSessionId:"",//批量上传sessionId
                templacelistNotInfo:true,//添加模块弹窗缺省页
                uploadVideoModal:false,//上传视频弹窗
                uploadVideoSuccess:false,//上传视频成功之后提示弹窗
                manageVideo:false,//管理视频功能
                isChoosevideo:[],//管理视频被选中的数组
                isChoosevideoNum:0,//管理视频被选中的数量
                videoAllchoose:false,
                imgRecentlyUseFlag:false,//图片素材最近使用
                imglocation:"",//图片最近使用
                splocation:"",//视频最近使用
                imguseindex:[],//当前使用图片索引
                imgusedom:"",//当前使用图片的DOM
                spcurrentchoose:[],
                spcurrentindex:[],
                spcurrentdata:"",
                graveId:"",
                isMyDelChooseImg:"",
                previewFlag:false,
                randomid:"",//视频随机id
                checkimgnum:0,
                callbackFN:"",
                callbackparameter:"",
                imgPreview:false,//图片预览
                imgPreviewUrl:"",
                imgPreviewStyle:"",
                qtshow:false,
                wrapright:false,
                accountId:"",
                musicPathStatus:"",
                changeModoName:false,
                changeModoInput:"",
                changeModoId:"",
                changeModoIndex:"",
                headerBack:"",//头像上传回调
                workDataTotal:"",//作品分页条数
                workDataPage:1,//作品列表当前页码
                ischangeFm:true,//是否上传视频封面
                personDataOld:"",//个人简介老数据
                phoneShow:true,//预览页面
                editWorksShow:false,//作品编辑弹窗
                editTrip:false,//人生旅途编辑弹窗
                workPreviewFlg:false,//作品预览弹窗
                qrCode:"",//模板二维码编码
                a:true,
                dsflag:true,//单双狂点开关
                photoName:"",//编辑图片名称临时存储
                photoIndex:"",
                SinglerePre:"",//编辑人生旅途临时复制的对象数据
                SinglerePreIndex:0,
                ueditorConfig:{
                    serverUrl:global.host+'/unsecured/baidu/ueditor/exec',
                    initialFrameWidth:'100%',  //初始化编辑器宽度,默认1000
                    initialFrameHeight:320,  //初始化编辑器高度,默认320
                    elementPathEnabled:false,///是否启用元素路径
                    wordCount:true,//是否开启字数统计
                    scaleEnabled:false,//是否可以拉伸长高,默认true(当开启时，自动长高失效)
                    maximumWords:20000,// 允许的最大字符数
                    toolbars: [[
			          //'anchor', //锚点
			          'undo', //撤销
			          'redo', //重做
			          'bold', //加粗
			          'indent', //首行缩进
			          //'snapscreen', //截图
			          'italic', //斜体
			          'underline', //下划线
			          //'strikethrough', //删除线
			          //'subscript', //下标
			          //'fontborder', //字符边框
			          //'superscript', //上标
			          'formatmatch', //格式刷
			          //'source', //源代码
			          //'blockquote', //引用
			          //'pasteplain', //纯文本粘贴模式
			          //'selectall', //全选
			          //'print', //打印
			        //   'preview', //预览
			          //'horizontal', //分隔线
			          //'removeformat', //清除格式
			          //'time', //时间
			          //'date', //日期
			          //'unlink', //取消链接
			          //'insertrow', //前插入行
			          //'insertcol', //前插入列
			          //'mergeright', //右合并单元格
			          //'mergedown', //下合并单元格
			          //'deleterow', //删除行
			          //'deletecol', //删除列
			          //'splittorows', //拆分成行
			          //'splittocols', //拆分成列
			          //'splittocells', //完全拆分单元格
			          //'deletecaption', //删除表格标题
			          //'inserttitle', //插入标题
			          //'mergecells', //合并多个单元格
			          //'deletetable', //删除表格
			          //'cleardoc', //清空文档
			          //'insertparagraphbeforetable', //"表格前插入行"
			          //'insertcode', //代码语言
			          //'fontfamily', //字体
			          'fontsize', //字号
			          //'paragraph', //段落格式
			          'simpleupload', //单图上传
			          //'insertimage', //多图上传
			          //'edittable', //表格属性
			          //'edittd', //单元格属性
			          //'link', //超链接
			          //'emotion', //表情
			          //'spechars', //特殊字符
			          //'searchreplace', //查询替换
			          //'map', //Baidu地图
			          //'gmap', //Google地图
			          //'insertvideo', //视频
			          //'help', //帮助
			          'forecolor', //字体颜色
			          //'backcolor', //背景色
			          //'insertorderedlist', //有序列表
			          //'insertunorderedlist', //无序列表
			          //'fullscreen', //全屏
			          //'directionalityltr', //从左向右输入
			          //'directionalityrtl', //从右向左输入
			          //'rowspacingtop', //段前距
			          //'rowspacingbottom', //段后距
			          //'pagebreak', //分页
			          //'insertframe', //插入Iframe
			          //'imagenone', //默认
			          //'imageleft', //左浮动
			          //'imageright', //右浮动
			          //'attachment', //附件
			          //'imagecenter', //居中
			          //'wordimage', //图片转存
			          //'lineheight', //行间距
			          //'edittip ', //编辑提示
			          //'customstyle', //自定义标题
			          //'autotypeset', //自动排版
			          //'webapp', //百度应用
			          //'touppercase', //字母大写
			          //'tolowercase', //字母小写
			          //'background', //背景
			          //'template', //模板
			          //'scrawl', //涂鸦
			          //'music', //音乐
			          //'inserttable', //插入表格
			          //'drafts', // 从草稿箱加载
                      //'charts', // 图表
                      'justifyleft', //居左对齐
                      'justifycenter', //居中对齐
			          'justifyright', //居右对齐			          
			          'justifyjustify', //两端对齐
			        ]],
                }
			}
		},
        watch:{
            // 如果路由有变化，会再次执行该方法
            "$route": "choosetypeFun",
            "photoAllchoose":"photoAllchoosefun",
            "videoAllchoose":"videoAllchoosefun",
            "subtemplacetype":function(){
                this.selecttemplace(1)
            },
            "subtemplacefg":function(){
                this.selecttemplace(1)
            },
            "breviarytext":function(){
                if(!this.breviarytext){
                    this.alginflag = false;
                    this.lhflag = false;
                    this.learflag = false;
                    this.textboxBg = false;
                }
            },
            "allChooseImgFlg":"checknumFn",
            "allChooseVideoFlg":"checkspFn"
        },
        directives: { focus: focus },
        props:["textflag"],
		computed: {
            ...mapState({ user: state => state.user }),
            swiper() {
                return this.$refs.mySwiper.swiper
            },
            editor() {
                return this.$refs.myTextEditor.quill;
            }
        },
        created(){
            this.choosetypeFun();
        },
        mounted(){
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
            window.onbeforeunload = function(event) { 
                return confirm("确定退出吗"); 
            } 
        },
        beforeUpdate(){
            //this.typeshow=this.typeshow
            // if(this.imagearr.length != 0&&this.$refs.upload){
            //     this.uploadlist= this.$refs.upload.fileList;
            // }
            // if(this.$refs.uploadwu&&this.$refs.uploadwu){
            //     this.uploadwu= this.$refs.uploadwu.fileList;
            // }
            // if(this.$refs.spdata&&this.spdata.length != 0){
            //     this.spdata= this.$refs.spdata.fileList;
            // }
            if(this.$refs.uploadsptk){
                
                this.uploadsptk= this.$refs.uploadsptk.fileList;
            }

            
        },
        components: {
            swiper, swiperSlide,draggable,
            'my-upload': myUpload,
            'sketch-picker': Sketch,
            
            //'vue-core-image-upload': VueCoreImageUpload,
            //'sketch-picker': sketch
        },
        methods: {
            fwbFN:function (res) {
              this.editor.focus();
              console.log(res.sourcePicturePath)
              this.editor.insertEmbed(this.editor.getSelection().index, 'image',this.imgurl+res.sourcePicturePath);
              console.log(this.content)
            },
            qtsetFlg(){//其他设置
                this.qtshow = true;
            },
            imgPreviewFun(url,style){//图片预览
                this.imgPreview = true;
                this.imgPreviewUrl = url;
                style.maxWidth="100%";
                style.maxHeight="100%";
                this.imgPreviewStyle=style;
            }, 
            previewFN(obj){
                var this_=this;
                //this_.savetemplateFn(this_.typeshow,this_.deltemplaceindex,this_.mkid);  
                this.previewFlag=obj;
                
            },
            ismusicPlayFn(obj){
                this.ismusicPlay = obj;
            },
            musicFn(){
                this.$refs.editheadername.adiuomethods();
            },
            WebuploadFn(data,action,name,fn,num,textinfo){
                this.imagedate=data;
                this.imagename=name;
                this.imgaction=action;
                this.imgFn=fn;
                this.num=num;
                this.textinfo=textinfo;
                this.imgloadflag=true;
            },
            musicFN(name){
                //把音乐URL传到预览页面
                console.log(name);
                //musicPathStatus -判断音乐是本地音乐还是服务器音乐 1:服务器 0:本地
                this.musicPathStatus = name.musicPathStatus;
                this.musicPathPre = name.musicPath;
                this.musicName=name.musicName;
                this.musicUseId=name.id;
                if(name.musicPath){
                    this.latelyUse(3,name)
                }
            },
            blurtextFn(ev,headerstyle,id,index){
                if(index==undefined){
                    this.$set(headerstyle,"moduleTitle",ev.target.innerText)  //直接改变数据不行，只有这样解决。
                }                
                this.$http.post(global.host+"/common/template/name/modify",{"moduleId":id,"moduleName":headerstyle[index].moduleTitle},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                        
                })
                .catch(function (response) {
                })
                
            },
            spdialogsucFn(res){
                var jsondate=JSON.parse(res);
                this.spdialog=true;
                if(jsondate.status=="9999"){

                    return;
                }
                else if(jsondate.status=="0"){
                    
                    this.$Message.error(jsondate.message);
                }
                else{
                    this.videoinfo.id=jsondate.result.id;
                    this.videoinfo.videoName=jsondate.result.videoName;
                    this.videoinfo.videoPath=jsondate.result.videoPath;
                    this.uploadVideoSuccess=true;
                    this.uploadVideoModal=false;
                    
                }
                
            },
            changesp(files){
                if(files[0].type=="video/webm"||files[0].type=="video/ogg"||files[0].type=="video/mp4"){
                    this.randomid=(new Date().getTime()+Math.floor(Math.random()*10000).toString()).toString().substr(8,9);
                    this.videoinfo.videoName=files[0].name.substring(0, files[0].name.lastIndexOf('.'));
                    this.progress=0;
                    this.uploadVideoModal=true;
                    
                }
                else{
                    this.$Message.error('请选择正确的视频格式');
                    return;
                }                               
            },
            progressFN(progress){
                if(!this.spdialog){
                    this.progress=progress;
                }
            },
            uploadFn(){
                this.$refs.spupload.submit();
                this.spdialog=false;
            },
            imguploadFn(obj,type){
                if(type == 'finish' && this.imagename == 'pic'){
                    var this_ = this;
                    this.$loading.show();                                                    
                    setTimeout(function(){                                                                           
                        this_.$loading.hide();  
                        this_.queryPhoto(this_.managePhotoPage);                        
                    },3000)
                    this.imgloadflag=obj;
                    // this.$http.get(global.host+"/common/wait/process",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    // .then((response) => {
                    //     this.queryPhoto(this.managePhotoPage);
                    //     this.imgloadflag=obj;
                    // })
                    // .catch(function (response) {
                    // })
                }else{
                    this.imgloadflag=obj;                                                          
                }
            },
            tongyongFn(){//通用模块是否显示
                var this_=this;
                this.tongyongflag=true;
                for(var i=0;i<this_.headerstyle.length;i++){
                    if(this_.headerstyle[i].type==4){//写死取照片集的样式字段
                        this_.stylefour={
                            "fzbt":this_.headerstyle[i].moduleTitleStyle.color,//标题字体颜色
                            "fzbg":this_.headerstyle[i].nameStyle.backgroundImage,//标题背景图片
                            "bgbt":this_.headerstyle[i].nameStyle.backgroundColor,//标题背景颜色
                            "bgmk":this_.headerstyle[i].headerStyle.backgroundColor,//模块背景颜色
                            "fzmk":this_.headerstyle[i].moduleContentStyle.color//模块内容字体颜色
                        }
                        this.$refs.fourFn.fourstyleFn(this_.stylefour)
                    }
                }
            },
            releasebtnFN(callback,obj){
                console.log(callback);
                console.log(obj);
                this.callbackFN=callback;
                this.callbackparameter=obj;
                this.savetemplateFn(this.typeshow,this.deltemplaceindex,this.mkid,true)
            },
            c(e){
                var this_=this;
                if(e){
                    if(this.savedate.templateModuleContent==null){
                        this.savedate.templateModuleContent=[];
                    }
                    var a=(new Date().getTime()+Math.floor(Math.random()*10000).toString()).toString();
                    this.savedate.templateModuleContent.push({
                        'contentStyle':{
                            "width":"250px",
                            "fontSize":"12px",
                            "color":"#fff",
                            "fontSize": "23px",
                            "lineHeight": "33px",
                            "height":"30px",
                            "overflow": "hidden",
                            "padding": "0px",
                            "fontFamily": "微软雅黑",
                            "backgroundColor": "",
                            "opacity": 1,
                            "top":"423px",
                            "left":"70px",
                            "zIndex":this.zdindex++,
                            "transform": "rotate(0deg)",
                            "borderStyle":"",
                            "borderColor":"",
                            "borderWidth":0,
                            "position": "absolute",
                            "-webkit-transform": "translateZ(0)",
                        },
                        'content':"双击此处进行编辑",
                        'id':a.substr(8,9),
                        'showTypeCount':'',
                        'showTypeDelay':'',
                        'showTypeDirection':'',
                        'showTypeLoop':'',
                        'showTypeTime':'',
                        'showTypeWay':'',
                        'templateModuleId':''
                    })
                    //$(".photoboxwarp .edittext").eq(this_.savedate.templateModuleContent.length-1).click();
                    
                    this.advanceFN(this,this.savedate)
                    setTimeout(function(){
                        $(".photoboxwarp .edittext").eq(this_.savedate.templateModuleContent.length-1).click();
                    },200)
                }
                
            },
            delindex(e){
                this.savedate.templateModuleContent.splice(e,1)
            },
			toggleShow() {
				this.show = !this.show;
            },
            uploadWorkImg(){//
                this.uploadWorkModal = !this.uploadWorkModal
            },
            bodyclick(e){
                this.texthide=false;
                this.xqsjzdialogShow();
                this.imgdialogHide();
                this.breviarytext=false;
                this.iconflag = false;
                this.bfyldataflag = false;
                this.newModule='newModule';
                this.changeModule='newModule';
                this.backModal = false;//反馈弹窗
                //e.stopPropagation();
                this.wraphide();
            },
            dbclickFn(ev,obj,text){
                // this.editflag=true;
                // this.texthide=false;
                // this.breviarytext=true;
                this.breviarysytle=obj[text];                
            },
            colorFn(){
                this.textboxBg=!this.textboxBg;
                this.alginflag = false;
                this.lhflag = false;
                this.learflag = false;
            },
            onChange(val) {//选中文字变色
                var tempstr = val.hex;
                this.breviarysytle.color = tempstr;
            },
            ajax3(obj){
                this._this=this;
                var this_=this;
                this_.cemeteryId=this.$route.query.mid;
                this_.templateid=this.$route.query.nid;
                this.global=global.host
                this.tokendata={"Authorization":this.user.token_type+" "+this.user.access_token}
                this.templatedate(0,obj)         
            },
            cropUploadSuccess(jsonData, field){
                console.log('头像上传成功');
                this.headerBack = jsonData.sharePicPathThumbnail;
                this.savedate.headPictureSource=jsonData.fileName;
			},
            cropSuccess(imgDataUrl, field){
				console.log('-------- crop success --------');
			},
            cropUploadFail(status, field){
				console.log('-------- upload fail --------');
				console.log('field: ' + field);
            },
            cropUploadSuccess2(jsonData, field){
                this.$refs.editheadername.cropUploadSuccess(jsonData, field);
            },
            uploadWorkSuccess(jsonData, field){//上传作品封面
                this.zpsingledata.pictureCoverPath=jsonData.fileName;
                this.zpsingledata.imageStyle=jsonData.imageStyle;
            },
            templatedate(index,obj){//模版初始数据
                var this_=this;
                this.dsflag=false;
                this.breviarytext=false;
                var index=index;                
                this.a=false;
                this.phoneShow = false;//预览弹窗手机页面
                
                this.$http.get(global.host+"/common/template/module/list/query?templateId="+this_.templateid+"&cemeteryId="+this_.cemeteryId+"&mark="+(obj==undefined?'0':obj)+"&moduleId="+this.mkid,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
					.then((response) => {
                        //obj判断是否是新增模块之后的操作
                        if(obj == 1){
                            index = response.body.datas.mark;
                        }
                        this.qrCode = response.body.datas.qrCode;//
                        this.phoneShow = true;//预览弹窗手机页面
                        this.dsflag=true;
                        this_.accountId=response.body.datas.accountId;
                        this_.status=response.body.datas.status;
                        this.musicName=response.body.datas.musicName;
                        this.musicUseId=response.body.datas.musicUseId;
                        this.musicPath=response.body.datas.musicPath;
                        this_.musicPathPre=response.body.datas.musicPath;
                        this_.musicPathStatus=response.body.datas.musicPathStatus;
                        //判断音乐属于OSS还是本地 0-本地 1-OSS null为老数据-OSS
                        //musicPathStatus
                        if(this_.musicPathStatus == "0"){
                            this_.musicurl = global.imgurl;
                        }else{
                            this_.musicurl=global.musicurl;
                        }
                        this.a=true;
                        this_.headerstyle=response.body.datas.templateModuleDTO;
                        this_.savedate=this_.headerstyle[index];
                        // this_.savedate.moduleImageDivStyle={
                        //         opacity: 1,
                        //         position: "absolute",
                        //         top: "0px",
                        //         left: "0px",
                        //         width: "380px",
                        //         height: "456px",
                        //         fontFamily: "微软雅黑",
                        //         transform: "rotate(0deg)",
                        //         zIndex: 1,
                        //         backgroundSize: "100% 100%",
                        // };
                        this_.graveType=response.body.datas.graveType;
                        this_.graveId=response.body.datas.graveId;
                        this_.doubleCemeteryList=response.body.datas.doubleCemeteryList;
                        this.typeshow=this_.savedate.type;
                        this.zdindex=this_.savedate.elementLevel;
                        this.mkid=this_.savedate.moduleId;
                        this.advancedata=[];
                        this.advancedata.push(this.clone(this_.savedate))
                        this.headerimage=this_.savedate.templateModulePicDTO?this_.savedate.templateModulePicDTO:[];
                        this.headersp=this_.savedate.templateModuleVideoDTO?this_.savedate.templateModuleVideoDTO:[];
                        this.accountType = response.body.datas.accountType;
                        this.customized = response.body.datas.customized
                        if(this_.graveType == 1){//判断墓穴类型
                            this.isNeedGuide()
                        }else if(this_.graveType == 2){
                            if(this.doubleCemeteryList[1].cemeteryId == this_.cemeteryId){
                                this.dscheckactive = 1;                           
                            }
                            this.isNeedGuide()
                        }else{
                            this_.graveType = 1
                            this.choosetype = true;
                        }
                        this.chooseLeftIndex = this.headerstyle[index];
                        this.personDataOld = JSON.parse(JSON.stringify(this.headerstyle[index]));
                        //当前模块
                        if(this_.savedate.type==3){//照片
                            this_.queryPhoto(1);
                        }else if(this_.savedate.type==5){//视频
                            this_.spdata = this_.savedate.videos;
                        }else if(this_.savedate.type==6){//作品
                            this_.queryWorks(1);
                        }
                        
                        for(var i=0;i<this_.headerstyle.length;i++){
                            if(this_.headerstyle[i].type==4){
                                this_.reltdata=this_.headerstyle[i].lifes;
                                    if(this_.reltdata!=""){
                                        this_.editrs(0,2)
                                    }
                                    else{
                                        this.Singlere={
                                            moduleId:"",
                                            cemeteryId:"",
                                            eventContent:"",
                                            endTime:"",
                                            startTime:"",
                                            id:"",
                                            eventPicCutBig:"",
                                            startTimeAndEndTime:"",
                                            imageStyle:""
                                        }
                                }
                            }
                        }

                       
                        if(this_.deltemplaceindex!=index){
                            this.checktype(this_.savedate.type,index,this.headerstyle[0].moduleId);
                        }
                        // if(obj=="check"){
                        //     setTimeout(function(){
                        //         this_.saveperson(obj);
                        //     },1000)
                        // }                        

                        
                        
                     })
					.catch(function (response) {
					})
                
                
            },
            checktype(type,index,moduleId){
                
                this.savetemplateFn(type,index,moduleId);
                //this.chooseLeftIndex = this.headerstyle[index]        //切换选中值
            },
            checktypeFN(type,index,moduleId,flag){
                if(moduleId == 0){
                    console.log('初始化');
                }
                var this_=this;
                //console.log(this_.savedate.type)
        
                this_.deltemplaceindex=index;
                
                this_.savedate=this_.headerstyle[index];
                this_.personDataOld = JSON.parse(JSON.stringify(this.headerstyle[index]));
                this.mkid=this_.savedate.moduleId;
                this.advancedata=[];
                this.zdindex=this_.savedate.elementLevel;
                this.advancedata.push(this.clone(this_.savedate))
                this.headerimage=this_.savedate.templateModulePicDTO?this_.savedate.templateModulePicDTO:[];
                this.headersp=this_.savedate.templateModuleVideoDTO?this_.savedate.templateModuleVideoDTO:[];
                
                //关闭所有组件弹窗
                this.texthide=false;
                this.xqsjzdialogShow();
                this.imgdialogHide();
                this.breviarytext=false;
                this.iconflag = false;
                this.bfyldataflag = false;
                this.wraphide();
                $(document).off();
                this_.typeshow=type;
                if(this_.typeshow==1){
                    console.log('切换到个人简介');
                    setTimeout(function(){
                        this_.$refs['modelFocusOne'].focus();                        
                    },100);
                }
                if(this_.typeshow==2){
                    console.log('切换到墓志铭');
                    setTimeout(function(){
                        this_.$refs['modelFocusTwo'].focus();                        
                    },100);
                }
                if(this_.typeshow===3){//点击照片
                    for(var i=0;i<this_.imagearr.length;i++){
                        this_.isChooseimg.push(false)
                    }
                    this_.imagearr=this_.savedate.photos;
                    this_.queryPhoto(this_.managePhotoPage);

                }
                if(this_.typeshow==4){//点击人生旅途
                    this_.reltdata=this_.savedate.lifes;
                    if(this_.reltdata!=""){
                        this_.editrs(0,2)
                    }
                    else{
                        this_.Singlere={
                            moduleId:"",
                            cemeteryId:"",
                            eventContent:"",
                            endTime:"",
                            startTime:"",
                            id:"",
                            eventPicCutBig:"",
                            startTimeAndEndTime:""
                        }
                    }                     
                }
                if(this_.typeshow==5){//点击视频列表
                    this_.spdata=this_.savedate.videos;
                    // this_.spdataClone=Object.assign({},this_.spdata);
                    //this_.queryVideo();
                }
                if(this_.typeshow==6){//点击作品列表
                    this_.queryWorks(1);

                    // this_.zpdata=this_.savedate.works;
                    // for(var i=0;i<this_.zpdata.length;i++){
                    //     this_.zpdata[i].createTime=this_.filter(this_.zpdata[i].createTime)//ajax时间有问题

                    // }
                    setTimeout(function(){
                        this_.$refs['modelFocusFour'].focus();                        
                    },200);

                }
                if(flag==true){
                    this_.callbackFN(this_.callbackparameter);
                    this_.$refs.editheadername.editModal=false;
                }
                
            },
            divblur(ev,obj,text,style){
                obj[text]=ev.target.innerText;
                this.deldomdata=text;
                this.domdata=obj;
                this.deldomstyle=style;
            },
            handleChangestart(data){
                this.savedate.cemeteryIntroduction.birthDay=new Date(data).getTime();
            },
            handleChangeend(data){
                this.savedate.cemeteryIntroduction.deadDay=new Date(data).getTime();
            },
            handleChangerStart(data){
                if(data[0]=="")return;
                this.Singlere.startTime=data;
            },
            handleChangerEnd(data){
                if(data[0]=="")return;
                this.Singlere.endTime=data;
            },
            handleChangers(data){
                if(data[0]=="")return;
                this.Singlere.startTimeAndEndTime=data;
            },
            saveperson(type,index,moduleId,flag){//保存个人简介
                if(this.savedate.headPictureSource == "" ||  !(/\S+/.test(this.savedate.userName))){
                    this.$Message.error('头像和姓名为必填项！');
                    this.globalflag=true;
                    return;
                }
                
                if(this.savedate.cemeteryIntroduction.birthDay > this.savedate.cemeteryIntroduction.deadDay){
                    this.$Message.error('逝世日期必须在出生日期之后');
                    return;
                }
                var this_=this;
                this_.savedate.cemeteryId=this_.cemeteryId
                this.wraphide()
                this_.savedate.moduleHtml=''+$(".photobox .photocontent").html()+'';
                this_.savedate.introductionStyle=this.$refs.introductionStyle.getAttribute("style");
                this_.savedate.introductionStyle=this.stylecheck(this_.savedate.introductionStyle);
                this_.savedate.introductionDayStyle=this.$refs.introductionDayStyle.getAttribute("style");
                this_.savedate.introductionDayStyle=this.stylecheck(this_.savedate.introductionDayStyle);
                this_.savedate.elementLevel=this_.zdindex;
                this.doubleCemeteryList[this.dscheckactive].userName=this_.savedate.userName
                this.userdefined();
                console.log("保存个人简介")
                var datajson=this.convertobject(this_.savedate);
                delete datajson.templateModuleContent;
                delete datajson.templateModulePicDTO;
                delete datajson.templateModuleVideoDTO;
                delete datajson.moduleHtml;
                datajson.birthDay = this.savedate.cemeteryIntroduction.birthDay;
                datajson.deadDay = this.savedate.cemeteryIntroduction.deadDay;
                console.log(this.headerBack);
                console.log(this_.headerBack);
                datajson.sharePicPathThumbnail = this.headerBack;
                this.$http.post(global.host+"/cemetery/template/introduction/admin/update",datajson,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
					.then((response) => {
                        //this_.templateid=response.body.templateId
                        //

                        if(response.body.status == 1){
                            this_.typeshow=type;
                            this_.deltemplaceindex=index;
                            this_.mkid=moduleId;
                            this_.checktypeFN(this_.typeshow,this_.deltemplaceindex,this_.mkid);
                            this_.chooseLeftIndex = this_.headerstyle[index];
                            if(flag==true){
                                this_.callbackFN(this_.callbackparameter);
                            }
                            
                            
                            //this.$Message.success(response.body.message);
                        }else{
                            if(flag==true){
                                this_.$refs.editheadername.editModal=false;
                            }
                            this_.$Message.error(response.body.message);
                        }
                        
                     })
					.catch(function (response) {
                        //if(flag==true){return;}
                        //this.$Message.error('服务器错误,请稍后再试!');
					})
            },
            userdefined(){//用户自定义的信息
                var this_=this;
                this_.savedate.nameStyle=this.$refs.nameStyle.getAttribute("style");
                this_.savedate.nameStyle=this.stylecheck(this_.savedate.nameStyle);
                //使用图片
                
                this_.savedate.picSourcePaths="";
                this_.savedate.picStyles="";
                this_.savedate.picIds="";

                for(var i=0;i<this.headerimage.length;i++){
                    this_.savedate.picIds+=this_.headerimage[i].id?this_.headerimage[i].id+",":''+","
                    this_.savedate.picSourcePaths+=this_.headerimage[i].picSourcePath+","
                    if(i==0){
                        this_.savedate.picStyles+=this_.headerimage[i].picStyle?"\""+JSON.stringify(this_.headerimage[i].picStyle).replace(/,/g,";")+"\",\"":''+"\",\""
                    }
                    else{
                        this_.savedate.picStyles+=this_.headerimage[i].picStyle?JSON.stringify(this_.headerimage[i].picStyle).replace(/,/g,";")+"\",\"":''+"\",\""
                    }
                }
                this_.savedate.picIds=this_.savedate.picIds.substr(0,this_.savedate.picIds.length-1);
                this_.savedate.picSourcePaths=this_.savedate.picSourcePaths.substr(0,this_.savedate.picSourcePaths.length-1)
                this_.savedate.picStyles=this_.savedate.picStyles.substr(0,this_.savedate.picStyles.length-1);
                //使用视频
                this_.savedate.videoIds=''
                this_.savedate.videoPicSourcePaths=''
                this_.savedate.videoStyles=''
                this_.savedate.videoPaths=''
                for(var i=0;i<this.headersp.length;i++){
                    this_.savedate.videoIds+=this_.headersp[i].id?this_.headersp[i].id+",":''+","
                    this_.savedate.videoPicSourcePaths+=this_.headersp[i].videoPicSourcePath+","
                    this_.savedate.videoPaths+=this_.headersp[i].videoPath+","
                    if(i==0){
                        this_.savedate.videoStyles+=this_.headersp[i].videoStyle?"\""+JSON.stringify(this_.headersp[i].videoStyle).replace(/,/g,";")+"\",\"":''+"\",\""
                    }
                    else{
                        this_.savedate.videoStyles+=this_.headersp[i].videoStyle?JSON.stringify(this_.headersp[i].videoStyle).replace(/,/g,";")+"\",\"":''+"\",\""
                    }
                }
                this_.savedate.videoPaths=this_.savedate.videoPaths.substr(0,this_.savedate.videoPaths.length-1);
                this_.savedate.videoIds=this_.savedate.videoIds.substr(0,this_.savedate.videoIds.length-1);
                this_.savedate.videoPicSourcePaths=this_.savedate.videoPicSourcePaths.substr(0,this_.savedate.videoPicSourcePaths.length-1)
                this_.savedate.videoStyles=this_.savedate.videoStyles.substr(0,this_.savedate.videoStyles.length-1)

                this_.savedate.contents="";
                this_.savedate.contentStyles="";
                this_.savedate.contentIds="";
                if(this.savedate.templateModuleContent){
                    for(var i=0;i<this.savedate.templateModuleContent.length;i++){
                        this_.savedate.contentIds+=this.savedate.templateModuleContent[i].id?this.savedate.templateModuleContent[i].id+",":''+","
                        this_.savedate.contents+=this.savedate.templateModuleContent[i].content+","
                        if(i==0){
                            this_.savedate.contentStyles+=this.savedate.templateModuleContent[i].contentStyle?"\""+JSON.stringify(this.savedate.templateModuleContent[i].contentStyle).replace(/,/g,";")+"\",\"":''+"\",\""
                        }
                        else{
                            this_.savedate.contentStyles+=this.savedate.templateModuleContent[i].contentStyle?JSON.stringify(this.savedate.templateModuleContent[i].contentStyle).replace(/,/g,";")+"\",\"":''+"\",\""
                        }
                        
                    }
                }
                
                
                this_.savedate.contentIds=this_.savedate.contentIds.substr(0,this_.savedate.contentIds.length-1);
                this_.savedate.contents=this_.savedate.contents.substr(0,this_.savedate.contents.length-1)
                this_.savedate.contentStyles=this_.savedate.contentStyles.substr(0,this_.savedate.contentStyles.length-1)
            },
            convertobject(obj){
                var this_=this;
                var datajson=Object.assign({}, obj);//复制对象，var datajson=this_.savedate直接赋值不对
                // datajson.birthDayAndDeadDay=datajson.birthDayAndDeadDay?datajson.birthDayAndDeadDay.join(","):''
                for(var key in datajson){
                    if(isJSON(datajson[key],true)){
                            datajson[key]=JSON.stringify(datajson[key])
                    }
                }
                return datajson;
            },
            changecolor(val){
               this.colortext=val;
            },
            clicktext(ev,obj,text,textusername){//文字组件传进去
                if(!(this.breviarytext&&window.checkflag==text)){
                    this.texthide=true;
                    this.breviarytext=false;
                }
                this.delflag=false;
                
                
                this.currentel=obj;
                this.currentelstr=text;
                this.zddom=ev.target;//置顶功能DIV
                //this.fontSize=;
                this.textindex="";
                this.deldomstyle=text;
                this.deldomdata=textusername;
                this.domdata=obj;
                this.$refs.textdialogFN.showtext(obj[text]);
            },
            clickzdtext(ev,obj,text,index){
                if(!(this.breviarytext&&window.checkflag==text+index)){
                    this.texthide=true;
                    this.breviarytext=false;
                }
                this.currentel=obj[text];
                this.currentelstr=index;
                this.zddom=ev.target;//置顶功能DIV
                
                this.fontSize=obj[text].contentStyle;
                this.deldomdata=index;  //删除数组本身
                this.domdata=obj;
                this.textindex=text;//当前索引
                this.delflag=true;
                this.textzddata="templateModuleContent";
                this.$refs.textdialogFN.showtext(this.currentel[this.currentelstr]);
            },
            clickimg(ev,obj,text,index,type){
                this.textzddata=type
                this.texthide=false;
                this.currentel=obj[text];
                this.currentelstr=index;
                this.zddom=ev.target;//置顶功能DIV
                this.fontSize=obj[text];

                this.textindex=text;//当前索引
                this.deldomdata=index;  //删除数组本身
                this.domdata=obj;
                this.delflag=true;
                //this.$set(this.domdata,this.deldomdata,'');
            },
            stylecheck(obj){//样式转换
                var a=obj.replace(/\-[a-z]/g,function(name){
                    var tempstr=name.replace("-","")
                    return tempstr.toUpperCase()
                });
                var b=a.replace(/\:\s/g,function(name){
                    return name+'\''
                })
                var c=b.replace(/\;/g,function(name){
                    return '\''+name
                })
                var str="{"+c.replace(/\;/g,',')+"}"
                return eval("("+str+")")
            },
            currenteltext(text,obj,index){//文字组件传出来
                if(obj=="")return;
                this.fontSize=text;
                this.$set(obj,index,text)  //直接改变数据不行，只有这样解决。
                if(this.textindex===""){//不是自定义样式
                    this.advanceFN(this,obj);
                }
                else{//自定义样式
                    this.savedate.templateModuleContent[this.textindex]=obj;
                    this.advanceFN(this,this.savedate);
                }
                
            },
            currentelimg(style,introShowTypeDirection,photoHengCount,photoZongCount,styleFN){//图片组件传出来
                var this_=this;
                //this.savedate.headerStyle=style;
                this.savedate.introShowTypeDirection=introShowTypeDirection;
                this.savedate.photoHengCount=photoHengCount;
                this.savedate.photoZongCount=photoZongCount;
                //this.$set(this.swiperOption,"slidesPerView",photoZongCount) //直接改变数据不行，只有这样解决。
                //this.$set(this.swiperOption,"slidesPerColumn",photoHengCount)
                this.datastyleFN=styleFN;
                
            },
            emittext(ev,index,item,name,style){
                if(!ev){
                    return;
                }
                this.$set(item,name,ev.target.innerText)  //直接改变数据不行，只有这样解决。
            },
            emittexton(date){
                this.savedate.templateModuleContent=date
                //this.$set(item,name,ev.target.innerText)  //直接改变数据不行，只有这样解决。
            },
            mzbfn(type,index,moduleId,flag){
                var this_=this;
                // if(this.$refs.epitaphStyle){
                    this_.savedate.epitaphStyle=this.$refs.epitaphStyle.getAttribute("style");
                // }
                this_.savedate.epitaphStyle=this.stylecheck(this_.savedate.epitaphStyle);
                this_.savedate.elementLevel=this_.zdindex;
                this.wraphide()
                this_.savedate.moduleHtml=''+$(".photobox .photocontent").html()+'';
                this.userdefined()
                this_.savedate.tid=this_.mkid;
                this_.savedate.cemeteryId=this_.cemeteryId;
                var datajson=this.convertobject(this_.savedate);
                delete datajson.templateModuleContent;
                delete datajson.templateModulePicDTO;
                delete datajson.templateModuleVideoDTO;
                //不用回调
                
                this.$http.post(global.host+"/cemetery/template/epitaph/admin/save",datajson,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
					.then((response) => {
                        if(response.body.status == 1){
                            //this.$Message.success(response.body.message);
                            this_.typeshow=type;
                            this_.deltemplaceindex=index;
                            this_.mkid=moduleId;
                            this_.checktypeFN(this_.typeshow,this_.deltemplaceindex,this_.mkid);
                            this_.chooseLeftIndex = this.headerstyle[index]
                            if(flag==true){
                                this_.callbackFN(this_.callbackparameter);
                            }
                            
                        }else{
                            if(flag==true){
                                this_.$refs.editheadername.editModal=false;
                            }
                            this.$Message.error(response.body.message);
                        }
                     })
					.catch(function (response) {
                        //this.$Message.error("服务器错误,请稍后再试!");
					})
            },
            myimagefn(page,index,name){//所有人看得见的图片库
                this.topClass = "topP ";
                this.topClass2 = "topP on";
                this.topClass3 = "topP";
                this.topClass4 = "topP";
                this.photoRight = false;
                this.cloudphotoRight = true;
                this.biaotiflag = false;
                this.imgRecentlyUseFlag = false;
                this.imgdialogflag=true;
                if(index != undefined){
                    this.chooseimgtype = index;   
                }
                if(name != undefined){
                    this.imageName = name;
                }
                this.imgCurrent=parseInt(page);
                var this_=this;
                this_.savedate.tid=this_.mkid;
                this.$http.get(global.host+"/common/master/data/query?masterDataType=13",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})//风格
                    .then((response) => {
                        this.imagetype=response.body.result;
                        this.isMyChooseImg=[];
                    })
                    .catch(function (response) {
                })
                this.$http.get(global.host+"/picture/material/query?startPage="+page+"&category=1&type="+this.chooseimgtype+"&cemeteryId="+this.$route.query.mid+"&name="+this.imageName,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    // this.imageName = '';
                    this.syrimagearr=response.body.result;
                    this.syrimagearrtotal=response.body.total;
                    //如果页面归1
                    
                })
                .catch(function (response) {
                })
            },
            imagetypeFn(index,name){
                // console.log(name);
                // this.chooseimgtype = index;   
                // this.$http.get(global.host+"/picture/material/query?startPage=1&pageSize=10&type="+index+"&cemeteryId="+this.$route.query.mid+"&name="+name,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                // .then((response) => {
                //     this.syrimagearr=response.body.result;
                //     this.imageName = '';
                // })
                // .catch(function (response) {
                // })
            },
            myimgfn(value){//我的上传图片库
                this.myimgdata=value
                this.topClass = "topP on";
                this.topClass2 = "topP";
                this.topClass3 = "topP";
                this.topClass4 = "topP";
                this.photoRight = true;
                this.imgdialogflag=true;
                this.cloudphotoRight = false;
                this.biaotiflag = false;
                this.imgRecentlyUseFlag = false;
                this.isMyChooseImg=[];
                var this_=this;
                this.$http.get(global.host+"/picture/material/query/account?startPage="+value,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
					.then((response) => {
                        this.myimagearr=response.body.result;
                        this.myimagearrtotal=response.body.total;
                        this.isMyChooseImg=[];
                        this.isMyDelChooseImg=[];
                        this.$set(this,"checkimgnum",0)
                        for(var i = 0; i < this.myimagearr.length; i++){
                            this.isMyChooseImg.push(false);
                            this.isMyDelChooseImg.push(false);
                        }
                        
                        
                        
                     })
					.catch(function (response) {
					})
                
            },
            handlewudate(res){
                //this.imagedate.push.apply(this.imagedate,res.ablumListResult);
                // console.log(this.imgSessionId);
                //this.imgloadflag=false;
                //this.queryPhoto(this.managePhotoPage);
            },
            imgSessionIdFun(imgSessionId){
                this.imgSessionId = imgSessionId;
            },
            handleSuccess(res, file){//照片上传图片
                file.accountId=file.response.ablumListResult[0].accountId;
                file.albumCutName=file.response.ablumListResult[0].albumCutName;
                file.albumCutPathBig=file.response.ablumListResult[0].albumCutPathBig;
                file.albumDesc=file.response.ablumListResult[0].albumDesc;
                file.albumEasyName=file.response.ablumListResult[0].albumEasyName;
                file.albumName=file.response.ablumListResult[0].albumName;
                file.albumPath=file.response.ablumListResult[0].albumPath;
                file.authorityLevel=file.response.ablumListResult[0].authorityLevel;
                file.cemeteryId=file.response.ablumListResult[0].cemeteryId;
                file.createTime=file.response.ablumListResult[0].createTime;
                file.id=file.response.ablumListResult[0].id;
                file.imageStyle=file.response.ablumListResult[0].imageStyle;
                file.moduleId=file.response.ablumListResult[0].moduleId;
                file.sort=file.response.ablumListResult[0].sort;
                this.imagearr.push.apply(this.imagearr,file.response.ablumListResult); 
            },
            myimguploadFN(res){
                this.myimgfn(1)
                //this.imagedate.unshift.apply(this.imagedate,res.commPictureMaterialList);
                //this.imgloadflag=false; 
                //this.imagedate.length=30;
                
            },
            handleSuccesssp(res, file){//视频上传成功回调
                this.spdata.push(file.response.result);
                //file.id=file.response.ablumListResult.id;
                this.vedioafter = true;
                this.vedioShow = true;
            },
            handleErrorp(res,file){//视频上传失败回调
                this.vedioafter = true;
                this.vedioShow = false;
            },
            handleSuccessrs(res){//人生旅途上传图片
                this.Singlere.eventPicCutBig=res.fileName;
                this.Singlere.imageStyle=res.imageStyle;
                this.imgloadflag=false;
            },
            spfm(res){//视频封面
                this.editspsingle.videoPicPath=res.fileName;
                this.imgloadflag=false;
                this.ischangeFm = false;
                this.editspsingle.videoCoverStatus = 0;
            },
            spfm1(res){//新增上传视频封面
                this.videoinfo.videoPicPath=res.fileName;
                this.imgloadflag=false;
            },
            editimg(index){
                this.editimgdialog = true;
                this.photoName = Object.assign({}, this.imagearr[index]);
                this.photoIndex = index;
                // this.editdialogsubdata = Object.assign({}, this.imagearr[index]);
                // this.photoName = this.imagearr[index];
                // console.log(this.imagearr[index]);
                this.editdialogsubdata = this.imagearr[index];
                
            },
            editsavebtn(id){//保存照片
                var this_=this;
                this.$http.post(global.host+"/cemetery/template/relativesAblum/picture/update",{"id":id,"albumName":this_.editdialogsubdata.albumName,"albumDesc":this_.editdialogsubdata.albumDesc,"cemeteryId":this_.cemeteryId,"tid":this_.mkid},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
					.then((response) => {
                        if(response.body.status == 1){
                            this.editimgdialog=false;   
                            this.$Message.success(response.body.message);
                        }else{
                            this.$Message.error(response.body.message);
                        }
                        
                        //this.myimagearr=response.body.result
                     })
					.catch(function (response) {
					})
            },
            editcancelbtn(){
                this.imagearr[this.photoIndex] = this.photoName;
                this.editimgdialog = false;
            },
            editspsavebtn(id){//保存视频
                var this_=this;
                var c={
                "id":this.editspsingle.id,
                "name":this.editspsingle.videoName,
                "description":this.editspsingle.videoDesc,
                "authorityLevel":this.editspsingle.authorityLevel,
                "videoPicPath":this.editspsingle.videoPicPath
                }
                //视频封面置空  ischangeFm 是否上传了封面
                if(this.ischangeFm){
                    c.videoPicPath = "";
                }
                this.$http.post(global.host+"/video/material/update",c,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
					.then((response) => {
                        if(response.body.status == 1){
                            if(!this.ischangeFm){
                                this.spdata[this.editspindex].videoCoverStatus = 0;                                
                            }else{
                                this.spdata[this.editspindex].videoCoverStatus=this.editspsingle.videoCoverStatus;
                            }

                            this.spdata[this.editspindex].videoPicPath=this.editspsingle.videoPicPath;
                            this.spdata[this.editspindex].videoName=this.editspsingle.videoName                          
                            this_.editspdialog = false;
                            this_.$Message.success(response.body.message)
                        }else{
                            this_.$Message.error(response.body.message)
                        }
                        

                     })
					.catch(function (response) {
					})
            },
            editspaddbtn(){
                var this_=this;
                this.$http.post(global.host+"/video/material/update",this.videoinfo,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
					.then((response) => {
                        if(response.body.status == 1){
                            //修改为插入到最前面 unshift
                            this_.spdata.unshift(this_.videoinfo)
                            this_.uploadVideoSuccess = false;
                            this_.$Message.success(response.body.message);
                            this.videoinfo={"videoName":"","videoDesc":"","videoPicPath":"","authorityLevel":2,"id":""};
                        }else{
                            this_.$Message.error(response.body.message)
                        }
                        
                     })
					.catch(function (response) {
					})
                
            },
            editspaddbtncannal(){
                var this_=this;
                this_.spdata.unshift(this_.videoinfo);
                this_.uploadVideoSuccess = false;
                this.videoinfo={"videoName":"","videoDesc":"","videoPicPath":"","authorityLevel":2,"id":""};
            },
            editdelbtn(id,index){//删除照片
                this.$Modal.confirm({
                    width:"320",
                    content: "<p>确定要删除这个照片么？</p>",
                    onOk: () => {
                        var this_=this;
                        this.$http.post(global.host+"/cemetery/template/relativesAblum/delete",{"id":id,"cemeteryId":this_.cemeteryId,"tid":this_.mkid},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            if(response.body.status=="1"){
                                if(this.imagearr.length == 1 && this.managePhotoPage != 1){
                                    this.managePhotoPage = this.managePhotoPage - 1;
                                }
                                this.imagearr.splice(index,1);
                                this.queryPhoto(this.managePhotoPage);
                            }
                        })
                        .catch(function (response) {
                        })
                    },
                    onCancel: () => {
                    }
                });
            },
            delspbtn(){//删除视频
                var ids="";
                for(var i=0;i<this.spcurrentchoose.length;i++){
                    if(this.spcurrentchoose[i]==true){
                        ids+=this.uploadsptk[i].id+",";
                    }
                }
                if(ids==""){
                    this.$Message.error("请您先选择视频！");
                    return;
                }
                this.$Modal.confirm({
                    width:"320",
                    content: "<p>确定要删除这个视频么？</p>",
                    onOk: () => {
                        var this_=this;
                        this.$http.get(global.host+"/video/material/batchDelete?ids="+ids,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            if(response.body.status=="1"){
                                if(this.spCurrent == Math.ceil(this.mysparrtotal/12)){
                                    if((this.mysparrtotal%12 == 0 && ids.split(',').length == 13)||this.mysparrtotal%12 == ids.split(',').length-1){
                                        if(this.spCurrent == 1){
                                            this.spCurrent =1;
                                        }else{
                                            this.spCurrent = this.spCurrent -1;                                    
                                        }
                                    }                                
                                }
                                
                                this.allChooseVideoFlg = false;
                                this.myspfn(this.spCurrent,1)
                                // this.mysparr.splice(index,1);
                                // this.queryVideo();
                            }
                        })
                        .catch(function (response) {
                        })
                    },
                    onCancel: () => {
                    }
                });
                
            },
            delspstausbtn(id,index){//列表里删除
                this.$Modal.confirm({
                    width:"320",
                    content: "<p>确定要删除这个视频么？</p>",
                    onOk: () => {
                        var this_=this;
                        this.$http.post(global.host+"/video/material/no/use",{"videoMaterialId":id,"cemeteryId":this_.cemeteryId},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            if(response.body.status=="1"){
                                
                                this.spdata.splice(index,1);
                            }
                        })
                        .catch(function (response) {
                        })
                    },
                    onCancel: () => {
                    }
                });
                
            },
            photozhiding(id,index){
                var this_=this;
                this.$http.post(global.host+"/cemetery/template/relativesAblum/sort",{"idsInfo":id,"cemeteryId":this_.cemeteryId,"index":index},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
					.then((response) => {
                        if(response.body.status=="1"){
                            //this.imagearr.splice(0,0,this.imagearr[index])
                            //this.imagearr.splice(index+1,1)
                            this.queryPhoto(this_.managePhotoPage);
                        }
                     })
					.catch(function (response) {
					})
            },
            spzhiding(id,index){
                var this_=this;
                this.$http.post(global.host+"/cemetery/template/video/sort",{"moduleId":this_.mkid,"idsInfo":id,"cemeteryId":this_.cemeteryId,"index":0},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
					.then((response) => {
                        if(response.body.status=="1"){
                            this.spdata.splice(0,0,this.spdata[index])
                            this.spdata.splice(index+1,1)
                        }
                     })
					.catch(function (response) {
					})
            },
            uploadsp(){//上传视频
                var this_=this;
                new OSS.Wrapper({"AccessKeyId":"STS.NBMf1ECV4s5WyWvNhUnES5cEp","AccessKeySecret":"AiMBibaUCnt7Po7bCCg6ebuqXWLRfbtgjJL7gMyERxAb","Expiration":"2017-04-27T07:43:24Z","SecretToken":"CAIS4QF1q6Ft5B2yfSjIr4H4LYvxrokVxPe8e3HHqmgAYsp/2qbukjz2IHxNfHhsBu8Zv/ownWtT6PoelqNvRoRZAFDDbsZ2tgKRbJlzINivgde8yJBZor/HcDHhJnyW9cvWZPqDP7G5U/yxalfCuzZuyL/hD1uLVECkNpv74vwOLK5gPG+CYCFBGc1dKyZ7tcYeLgGxD/u2NQPwiWeiZygB+Cgc0johtPTnmpKmh0CA3AGg+Ig8vJ/sJ5WoVc5oMapkXs29tO4MLfaYiH8MtEcVpfkp1fcfp2ubpL2BDkJN8+pO140agAGDsInLY5vVQfIC9qbmhEdxPE5oY8S8+0fDdgGNoWAwYWajn2N53GHCxWsLk/xM+XberVMEWy0WQlQTQTzs/HLE2zOKxSH5uA83SMwkEHdm5tPbknRqersCcjVvKIFanFSTl2FiWDKLAcgb4463CLQr25zSucM1iaOBIGPRIKQ/Eg=="})

            },
            canspbtnFN(){
                var this_=this;
                this_.uploadVideoModal=false;
                this_.spdialog=true;
                this.$http.post(global.host+"/video/material/cancel",{"videoId":this_.randomid},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
					.then((response) => {
                        if(response.body.status==1){
                            this_.$Message.success('取消成功');
                            this_.uploadVideoModal=false;                            
                        }else{
                            this_.$Message.error(response.body.message);
                        }
                     })
					.catch(function (response) {
					})
            },
            delrs(index,id){//删除人生旅途              
                this.$Modal.confirm({
                    width:"320",
                    content: "<p>确定要删除这条人生旅途么？</p>",
                    onOk: () => {
                        if(this.isClick){
                            return;
                        }
                        this.isClick = true;
                        var this_=this;
                        this.reltdata.splice(index,1);
                        this.$http.post(global.host+"/cemetery/template/lifeJourney/delete",{"id":id,"cemeteryId":this_.cemeteryId},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            if(response.body.status=="1"){
                                //this.imagearr.splice(0,0,this.imagearr[index])
                                //this.imagearr.splice(index+1,1);
                                this.reltdata.length==0?this.Singlere={moduleId:"",
                                cemeteryId:"",
                                eventContent:"",
                                imageStyle:"",
                                endTime:"",
                                startTime:"",
                                id:"",
                                eventPicCutBig:"",
                                startTimeAndEndTime:[]}:this.Singlere=this.reltdata[0]                           
                            }
                        })
                        .catch(function (response) {
                        })
                    },
                    onCancel: () => {
                    }
                });
                this.isClick = false;
            },
            addTrip(){//新增人生旅途
                this.editTrip = true;
                this.$refs.rslvdialog.click();
                this.Singlere={
                    moduleId:"",
                    cemeteryId:"",
                    eventContent:"",
                    endTime:"",
                    startTime:"",
                    id:"",
                    eventPicCutBig:"",
                    startTimeAndEndTime:"",
                    imageStyle:""
                }
            },
            editrs(index,type){//编辑人生旅途             
                this.checkrslvindex=index;
                this.Singlere=this.reltdata[index];
                this.SinglerePreIndex = index;//编辑的数据下标
                this.SinglerePre =  Object.assign({}, this.Singlere);
                this.iconcheckflag=0;
                //滚动条置顶
                if(type==1){
                    this.editTrip = true;
                    this.$refs['rsinfoboxref'].scrollTop = 0;                   
                }
                if(index==0){
                    return;
                }
            },
            closeEditTrip(){//关闭人生旅途编辑弹窗
                this.editTrip = false;
                if(this.reltdata.length == 0){
                    return;
                }
                //关闭弹窗 数据还原回去
                this.Singlere = this.SinglerePre;
                this.reltdata[this.SinglerePreIndex] = this.SinglerePre;
                //下面两句话不需要
                //this.queryTrip();

                //this.editrs(0,2);
            },
            queryTrip(){//查询人生旅途数据
                this.$http.post(global.host+"/cemetery/template/lifeJourney/query",{"moduleId":this.mkid,"cemeteryId":this.$route.query.mid,"startPage":"1","pageSize":"100"},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    if(response.body.status == 1){
                        this.reltdata=response.body.records;
                        this.savedate.lifes=response.body.records;
                    }else{
                        this.$Message.error(response.body.message);
                    }                    
                })
                .catch(function (response) {
                })
            },
            saverslt(type){
                if(this.Singlere.eventPicCutBig == undefined||this.Singlere.eventPicCutBig == "" || this.Singlere.startTime == undefined || !(/\S+/.test(this.Singlere.eventContent)) ||this.Singlere.startTime =="" || this.Singlere.endTime ==undefined || this.Singlere.endTime ==""){
                    if(type == 2){
                        this.$Message.error('图片、时间和内容为必填项！');                       
                    }
                    return;
                }
                if(this.Singlere.startTime > this.Singlere.endTime){
                    this.$Message.error('结束时间必须大于开始时间');
                    return;                    
                }
                var this_=this;
                if(!this.rslvflag){
                    return;
                }
                if(this.Singlere.id==""){
                    this.rslvflag=false;
                    this.Singlere.cemeteryId=this.cemeteryId
                    this.Singlere.moduleId=this_.mkid;
                    var datajson=Object.assign({}, this.Singlere);
                    datajson.imageStyle=JSON.stringify(datajson.imageStyle);
                    
                    this.$http.post(global.host+"/cemetery/template/lifeJourney/admin/insert",datajson,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            if(response.body.status=="1"){
                                setTimeout(()=>{this.rslvflag=true;},1000)
                                //关闭编辑弹窗
                                this.editTrip = false;
                                this.$Message.success(response.body.message);
                                //查询人生旅途数据
                                this.queryTrip();
                            }else{
                                this.$Message.error(response.body.message); 
                            }
                        })
                        .catch(function (response) {
                        })
                }
                else{
                    
                    var datajson=Object.assign({}, this.Singlere);
                    // datajson.startTimeAndEndTime=datajson.startTimeAndEndTime.join(",");
                    // datajson.startTime=datajson.startTimeAndEndTime.join(",");
                    datajson.imageStyle=JSON.stringify(datajson.imageStyle);
                    this.$http.post(global.host+"/cemetery/template/lifeJourney/admin/update",datajson,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            if(response.body.status=="1"){      
                                //关闭编辑弹窗
                                this.editTrip = false;                        
                                if(type == 2){
                                    this.$Message.success(response.body.message);                                                
                                }                                   
                                this_.reltdata[this.checkrslvindex]=this.Singlere;
                                /*
                                    不需要清空数据了 编辑人生旅途逻辑修改
                                */
                                /*
                                this.Singlere={
                                    moduleId:"",
                                    cemeteryId:"",
                                    eventContent:"",
                                    endTime:"",
                                    startTime:"",
                                    id:"",
                                    eventPicCutBig:"",
                                    startTimeAndEndTime:"",
                                    imageStyle:""
                                }*/
                            }else{
                                this.$Message.error(response.body.message);
                            }
                        })
                        .catch(function (response) {
                    })
                }
            },
            saversltstyle(type,index,moduleId,flag){//保存人生旅途样式
                var this_=this;     
                this.$http.post(global.host+"/cemetery/template/lifeJourney/admin/update/module",{"moduleIcon":this.savedate.moduleIcon,"moduleSwiperIcon0Path":this.savedate.moduleSwiperIcon0Path,"moduleSwiperIcon1Path":this.savedate.moduleSwiperIcon1Path,"moduleSwiperDiv2Style":JSON.stringify(this.savedate.moduleSwiperDiv2Style),"cemeteryId":this.$route.query.mid,"moduleId":this.savedate.moduleId},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})//功能列表
                    .then((response) => {
                        if(response.body.status == 1){
                            // this.$Message.success(response.body.message);
                            this_.typeshow=type;
                            this_.deltemplaceindex=index;
                            this_.mkid=moduleId;
                            this_.checktypeFN(this_.typeshow,this_.deltemplaceindex,this_.mkid);
                            this_.chooseLeftIndex = this.headerstyle[index];
                            if(flag==true){
                                this_.callbackFN(this_.callbackparameter);
                            }
                        }else{
                            this.$Message.error(response.body.message);
                            if(flag==true){
                                this_.$refs.editheadername.editModal=false;
                            }                            
                        }
                    })
                    .catch(function (response) {
                })
            },
            addtemplace(){
                //弹层出现
                this.changeModule = "newModule ";                
                this.newModule = "newModule newModuleOpen";
                this.$http.get(global.host+"/common/master/data/query?masterDataType=6",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})//风格
                    .then((response) => {
                        this.templacefglist=response.body.result;
                    })
                    .catch(function (response) {
                })
                this.$http.get(global.host+"/common/master/data/query?masterDataType=15",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})//功能列表
                    .then((response) => {
                        this.templacetypelist=response.body.result;
                    })
                    .catch(function (response) {
                })
                this.templacelistPage = 0;
                this.moduleHtml = [];
                this.templacelistNot = true;
                this.selecttemplace(1);
            },
            musiclocalStorageFn(){
                this.musiclocalStorage=eval('(' + localStorage.getItem(this.accountId+"3") + ')') || [];
            },
            selecttemplace(type){//查询模块列表
                if(type){
                    this.templacelistPage = 0;
                }
                this.templacelistPage++;
                
                if(this.subtemplacetype == 0){
                    this.subtemplacetype = "";
                }
                var this_ = this;
                this.queryflag=false;
                this.$http.get(global.host+"/common/template/query/module/list?&startPage="+this.templacelistPage+"&pageSize=9&type="+this.subtemplacetype+"&moduleName="+this.moduleName+'&templateStyle='+this.subtemplacefg,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})//功能列表
                .then((response) => {
                    this.queryflag=true;
                    if(response.body.total == 0){
                        this.templacelistNotInfo = false;
                    }else{
                        this.templacelistNotInfo = true;
                    }
                    if(type){
                        this.moduleHtml = response.body.result                       
                    }else{
                        this.moduleHtml.push.apply(this.moduleHtml, response.body.result);
                        setTimeout(function(){
                            this_.$refs['newModuleRef'].scrollTop = this_.$refs['newModuleRef'].scrollHeight;                                                   
                        },200)
                    }
                    if(response.body.total == this.moduleHtml.length){
                        this.templacelistNot = false;
                    }else{
                        this.templacelistNot = true;
                    }
                })
                .catch(function (response) {
                })
            },
            newaddtemplace(type,id,index){//新增模块图片框
                
                var this_=this;
                
                this.$http.post(global.host+"/common/template/add/module",{"moduleId":id,"cemeteryId":this.$route.query.mid,"templateModuleId":this_.savedate.moduleId},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})//功能列表
                    .then((response) => {
                        if(response.body.status == 1){
                            this_.newModule = "newModule";
                            //this_.commSweepTemplateModuleDTOs.splice(this.deltemplaceindex+1,0,response.body.result)//添加当前模块
                            //this.templatedate(this_.commSweepTemplateModuleDTOs[0].type,this_.commSweepTemplateModuleDTOs[0].id,this.deltemplaceindex+1)
                            //上面两句话让我整个页面再跑AJAX
                            //先保存模块数据,新增模块前保存数据
                            this.savetemplateFn(this.typeshow,this.deltemplaceindex,this.mkid)
                            this.ajax3(1);
                        }else{
                            this.$Message.error(response.body.message);
                        }
                        
                    })
                    .catch(function (response) {
                })
            },
            deltemplace(){
                var this_=this;
                if(this_.savedate.type==1){
                    this_.$Modal.confirm({
                        width:"320",
                        content: "<p>个人简介模块不允许删除</p>",
                        onOk: () => {
                            
                        },
                        onCancel: () => {

                        }
                    });
                    return;
                }
                this.$Modal.confirm({
                    width:"320",
                    content: "<p>您确定要删除该模块吗？</p>",
                    onOk: () => {
                        this.$http.post(global.host+"/common/template/delete/module",{"id":this_.savedate.moduleId},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})//功能列表
                            .then((response) => {
                                if(response.body.status == 1){
                                    this_.headerstyle.splice(this.deltemplaceindex,1)//删除当前模块
                                    this.templatedate(0)
                                }else{
                                    this.$Message.error(response.body.message);
                                }
                                
                            })
                            .catch(function (response) {
                        })
                    },
                    onCancel: () => {

                    }
                });
                
                
            },
            replacetemplace(obj){
                this.newModule = "newModule";                
                this.changeModule = "newModule newModuleOpen";
                var this_=this;
                if(obj==1){
                    this.changeModuleS1 = "on";
                    this.changeModuleS2 = "";
                    this.$http.get(global.host+"/cemetery/template/show/query?startPage="+1+"&pageSize="+6+"&orderType="+2,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})//功能列表
                        .then((response) => {
                            this_.selecttemplacelist=response.body.result
                        })
                        .catch(function (response) {
                    })
                }
                else{
                    this.changeModuleS1 = "";
                    this.changeModuleS2 = "on";
                    this.$http.get(global.host+"/cemetery/template/show/query/collect?startPage=1&pageSize=6",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})//功能列表
                        .then((response) => {
                            this_.selecttemplacelist=response.body.result
                        })
                        .catch(function (response) {
                    })
                }
                
            },
            creatInfo(id){
                this.$Modal.confirm({
                    width:"320",
                    content: "<p>确定要更换模板么？</p>",
                    onOk: () => {
                       this.$http.post(global.host+"/admin/template/update",{"cemeteryId":this.$route.query.mid,"newTemplateId":id,"sourceTemplateId":this.$route.query.nid},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            if(response.body.status == 1){
                                this.changeModule = "newModule";
                                this.choosetypeFun();
                                this.selecttemplacelist="";
                                //window.location.reload()
                                //this.$router.push({ path: '/templateEdit' ,query:{"nid":response.body.result.templateId,"mid":this.$route.query.mid}});//跳转传记页面                            
                            }else{
                                this.$Messgae.error(response.body.message);
                            }
                            
                        })
                        .catch(function (response) {
                        })         
                    },
                    onCancel: () => {
                    }
                });
                
           },
           handleSuccesszp(res){
                this.zpsingledata.pictureCoverPath=res.fileName;
                this.zpsingledata.imageStyle=res.imageStyle;
                this.imgloadflag=false;
           },
           spdataFN(res, file){//视频我的上传接口
                // file.accountId=file.response.result.accountId;
                // file.authorityLevel=file.response.result.authorityLevel;
                // file.cemeteryId=file.response.result.cemeteryId;
                // file.createTime=file.response.result.createTime;
                // file.id=file.response.result.id;
                // file.isUsed=file.response.result.isUsed;
                // file.moduleId=file.response.result.moduleId;
                // file.sort=file.response.result.sort;
                // file.status=file.response.result.status;
                // file.videoDesc=file.response.result.videoDesc;
                // file.videoName=file.response.result.videoName;
                // file.videoPath=file.response.result.videoPath;
                // file.videoPicBig=file.response.result.videoPicBig;
                // file.videoPicPath=file.response.result.videoPicPath;
                // file.videoPicPathSource=file.response.result.videoPicPathSource;
                // file.videoPicThumbnail=file.response.result.videoPicThumbnail;
                this.mysparr.push(file.response.result);
                this.myspfn(1,1);
           },
           backWorksList(){
               this.editWorksShow = false;
               this.zpsingledata={   
                    "creativeTime":"",
                    "worksName":"",
                    "worksContent":"",
                    "pictureCoverPath":"",
                    "id":"",
                    "cemeteryId":"",
                    "imageStyle":""
                };
                this.queryWorks(this.workDataPage);                
                this.editorReady(this.editorInstance);
           },
           addWorks(){
               this.$refs.addwork.click();
               this.editWorksShow = true;
               this.zpsingledata={   
                    "creativeTime":"",
                    "worksName":"",
                    "worksContent":"",
                    "pictureCoverPath":"",
                    "id":"",
                    "cemeteryId":"",
                    "imageStyle":""
                }
                this.editorReady(this.editorInstance);
           },
           editzp(index){
               //编辑作品
                this.editWorksShow = true;
                this.zpsingledata=this.zpdata[index];
                this.zpindex=index;
                this.$refs['zpinfobox'].scrollTop = 0;
                this.editorReady(this.editorInstance);
           },
           editorReady(editorInstance){
                this.editorInstance = editorInstance;
                // this.zpsingledata.worksContent
                editorInstance.setContent(this.zpsingledata.worksContent);
                editorInstance.addListener('contentChange', () => {
                    this.zpsingledata.worksContent = editorInstance.getContent();
                    console.log('编辑器内容发生了变化：', editorInstance.getContent());
                });
           },
           filterfloat(obj){
                return parseInt(obj)+"%"
           },
           filter(value) {//value为13位的时间戳
				function add0(m) {
					return m < 10 ? '0' + m : m
				}
				var time = new Date(parseInt(value));
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				return y + '-' + add0(m) + '-' + add0(d) + '';
			},
            stringfilter(obj){//人生旅途转换时间
                if(!obj){return ''}
                var a="";
                a = obj.substring(0,4);
                return a;
            },
            stringpersonfilter(obj){//个人简介转换时间，有问题后续优化
                var a=obj;
                if(!obj){
                    return a="";
                }
                a=obj.join("-");          //先注释
                return a;
            },
            saveaddzp(id){
                if(this.zpsingledata.pictureCoverPath == "" || this.zpsingledata.creativeTime == undefined || !(/\S+/.test(this.zpsingledata.worksName)) ||this.zpsingledata.creativeTime ==""){
                    this.$Message.error('图片、作品名称和时间为必填项！');
                    return;
                }        
                var this_=this;
                if(id==""){
                    this.zpsingledata.cemeteryId=this.$route.query.mid;
                    this.zpsingledata.moduleId=this.savedate.moduleId;
                    this.zpsingledata.worksContent=this.editorInstance.getContent();
                    var datajson=Object.assign({}, this.zpsingledata);
                    datajson.imageStyle=JSON.stringify(datajson.imageStyle);


                    this.$http.post(global.host+"/cemetery/template/works/admin/save",datajson,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {
                        if(response.body.status == 1){
                            // this.zpdata=response.body.result;
                            // this.savedate.works=response.body.result;
                            //关闭弹窗
                            this.editWorksShow = false;
                            this.queryWorks(this.workDataPage);
                            this.$Message.success(response.body.message); 
                            this.zpsingledata={   
                                "creativeTime":"",
                                "worksName":"",
                                "worksContent":"",
                                "pictureCoverPath":"",
                                "id":"",
                                "cemeteryId":"",
                                "imageStyle":""
                            }
                            this.editorReady(this.editorInstance);
                        }else{
                            this.$Message.error(response.body.message); 
                        }
                        
                    })
                    .catch(function (response) {
                    })
                }
                else{
                    this.zpsingledata.worksContent=this.editorInstance.getContent();
                    var datajson=Object.assign({}, this.zpsingledata);
                    datajson.imageStyle=JSON.stringify(datajson.imageStyle);
                    this.$http.post(global.host+"/cemetery/template/works/admin/edit",datajson,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {
                        if(response.body.status == 1){
                            // this.zpdata=response.body.result;
                            // this.savedate.works=response.body.result;
                            //关闭弹窗
                            this.editWorksShow = false;
                            this.queryWorks(this.workDataPage);
                            this.$Message.success(response.body.message); 
                            this.zpsingledata={   
                                "creativeTime":"",
                                "worksName":"",
                                "worksContent":"",
                                "pictureCoverPath":"",
                                "id":"",
                                "cemeteryId":"",
                                "imageStyle":""
                            }    
                        }else{
                            this.$Message.error(response.body.message); 
                        }
                                           
                        
                    })
                    .catch(function (response) {
                    })
                }
                
            },
            workPreviewFun(){//预览作品
                this.workPreviewFlg = true;
            },
            handleChangezp(data){
                this.zpsingledata.creativeTime=data
            },
            delzp(index){
                this.$Modal.confirm({
                    width:"320",
                    content: "<p>确定要删除这个作品么？</p>",
                    onOk: () => {
                        if(this.isClick){
                            return;
                        }
                        this.isClick = true;
                        var this_=this;
                        this.$http.post(global.host+"/cemetery/template/works/delete",{"id":this.zpdata[index].id},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            if(response.body.status == 1){
                                if(this_.zpdata.length == 1 && this_.workDataPage != 1){
                                    this_.workDataPage = this_.workDataPage -1;
                                }
                                this_.zpdata.splice(index,1);                                
                                this_.queryWorks(this_.workDataPage);
                                this.zpsingledata={ 
                                    "creativeTime":"",
                                    "worksName":"",
                                    "worksContent":"",
                                    "pictureCoverPath":"",
                                    "id":"",
                                    "cemeteryId":"",
                                    "imageStyle":""
                                }
                            }else{
                                this.$Messgae.error(response.body.message);
                            }
                            
                        })
                        .catch(function (response) {
                        })
                    },
                    onCancel: () => {
                    }
                });
               this.isClick = false;
            },
            editsp(id,index){
                var this_=this;
                this.editspindex=index;
                this.$http.get(global.host+"/cemetery/template/video/query/one?id="+this.spdata[index].id,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {
                        if(response.body.status == 1){
                            this_.editspdialog = true;
                            this_.editspsingle=response.body.result
                        }else{
                            this_.$Message.error(response.body.message);
                        }                       
                        //this_.spdata.splice(index,1)                        
                    })
                    .catch(function (response) {
                    })
            },
            myimgdel(id,index){
                this.$Modal.confirm({
                    width:"320",
                    content: "<p>确定要删除这个照片么？</p>",
                    onOk: () => {
                        var this_=this;
                        this.$http.get(global.host+"/picture/material/delete?ids="+id,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            //this_.editspsingle=response.body.result
                            //this_.myimagearr.splice(index,1)
                            this.myimgfn(this.myimgdata)
                        })
                        .catch(function (response) {
                        })
                    },
                    onCancel: () => {
                    }
                });
                
            },
            imgRecentlyFn(ev,index){
                this.imgusedom=ev;
                var this_=this;
                
                if(this.photoimgtype==1){
                    this_.imguseindex.push(index);
                    this.$set(this.isMyChooseImg,index,!this.isMyChooseImg[index]);
                }
                else{
                    this_.imguseindex=index;
                    if(this_.isMyChooseImg[this_.imguseindex]){
                        this_.$set(this_.isMyChooseImg,index,!this_.isMyChooseImg[index]);
                        return;
                    }
                    this_.isMyChooseImg=[];
                    for(var i = 0; i < this.myimagearr.length; i++){
                        this_.isMyChooseImg.push(false)
                    }
                    this.$set(this.isMyChooseImg,index,!this.isMyChooseImg[index]);
                    return false;
                }
            },
            imgRecentlyUseFnsuc(){
                var this_=this;
                var flag=true;
                for(var i=0;i<this_.isMyChooseImg.length;i++){
                        if(this_.isMyChooseImg[i]==true){
                            flag=false
                        }
                    }
                if(flag){
                    this.$Message.error("请您选择图片");
                    return;
                }
                var h=this_.imgusedom.target.parentNode.previousElementSibling.previousElementSibling.naturalHeight;
                var w=this_.imgusedom.target.parentNode.previousElementSibling.previousElementSibling.naturalWidth;
                var transformstyle=this_.imgusedom.target.parentNode.previousElementSibling.previousElementSibling.style.transform
                if(w<=140&&h<=140){
                    w=w*1.5+"px";h=h*1.5+"px";}
                else if(w||h>140){
                    if(w<=h){
                        h="210px";
                        w="auto";
                    }
                    else {
                        w="210px";
                        h="auto";
                    }
                }
                if(this.photoimgtype==1){
                    this_.photoModal=false;
                    var ids="";
                    for(var i=0;i<this_.isMyChooseImg.length;i++){
                        if(this_.isMyChooseImg[i]==true){
                            ids+=this.imglocation[i].id+","
                        }
                    }
                   this.$http.post(global.host+"/picture/material/batchUse",{"cemeteryId":this.cemeteryId,"moduleId":this.mkid,"ids":ids},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {
                        // var a={
                        //     "albumPath":this.imglocation[index].sourcePath,
                        //     "albumDesc":this.imglocation[index].description,
                        //     "authorityLevel":this.imglocation[index].authorityLevel,
                        //     "id":response.body.id,
                        //     "accountId":this.imglocation[index].accountId,
                        //     "albumName":this.imglocation[index].name,
                        //     "imageStyle":this.imglocation[index].imageStyle
                        // }
                        //this_.imagearr.splice(0,0,a);
                        this.queryPhoto(this_.managePhotoPage);
                    })
                    .catch(function (response) {
                    })
                }
                else if(this.photoimgtype==2){
                    this_.photoModal=false;
                    var a=(new Date().getTime()+Math.floor(Math.random()*10000).toString()).toString();
                    this_.headerimage.push({"picSourcePath":this_.imglocation[this_.imguseindex].sourcePath,"id":a.substr(8,9),"picStyle":{"width":w,"transform":transformstyle,"top":"","height":h,"left":"","position":"absolute","zIndex":this.zdindex++}});
                    this_.savedate.templateModulePicDTO=this_.headerimage
                    this_.advanceFN(this,this_.savedate);
                    setTimeout(function(){
                        document.querySelectorAll(".imgclick")[this_.headerimage.length-1].click();
                    },200)
                }
                else if(this.photoimgtype==3){
                    this_.photoModal=false;
                    this.savedate.headerStyle.backgroundImage="url("+this_.imgurl+this_.imglocation[this_.imguseindex].sourcePath+")";
                    this.savedate.headerStyle.backgroundRepeat="no-repeat";
                    this.savedate.headerStyle.backgroundPositionX="center";
                    this.savedate.headerStyle.backgroundPositionY="center";
                    this_.advanceFN(this,this.savedate);
                }
                else if(this.photoimgtype==4){
                    this_.photoModal=false;
                    this_.savedate[this.currenticon]=this_.imglocation[this_.imguseindex].sourcePath;
                    this_.advanceFN(this,this.savedate)
                    
                }
                else if(this.photoimgtype==5){
                    this_.photoModal=false;
                    this_.$set(this_.headerimage[this.textindex],'picSourcePath',this_.imglocation[this_.imguseindex].sourcePath);
                    this_.headerimage[this.textindex].picStyle={"width":w,"top":this_.headerimage[this.textindex].picStyle.top,"transform":transformstyle,"height":h,"left":this_.headerimage[this.textindex].picStyle.left,"position":"absolute","zIndex":this_.headerimage[this.textindex].picStyle.zIndex};
                    this_.advanceFN(this,this.savedate);
                    setTimeout(function(){
                        document.querySelectorAll(".imgclick")[this_.textindex].click();
                    },200)
                }
                if(this.photoimgtype==1){
                    for(var i=0;i<this_.imguseindex.length;i++){
                        this_.latelyUse(1,this_.imglocation[this_.imguseindex[i]]);
                    }
                    
                }
                else{
                    this_.latelyUse(1,this_.imglocation[this_.imguseindex]);
                }
                
                this_.imguseindex=[];
            },
            imguse(ev,index){
                this.imgusedom=ev;
                var this_=this;
                if(!this.imgdialogflag){
                    this.$Message.error("请先完成管理");
                    return;
                }
                if(this.photoimgtype==1){
                    this_.imguseindex.push(index);
                    this.$set(this.isMyChooseImg,index,!this.isMyChooseImg[index]);
                }
                else{
                    this_.imguseindex=index;
                    if(this_.isMyChooseImg[this_.imguseindex]){
                        this_.$set(this_.isMyChooseImg,index,!this_.isMyChooseImg[index]);
                        return;
                    }
                    this_.isMyChooseImg=[];
                    for(var i = 0; i < this.myimagearr.length; i++){
                        this_.isMyChooseImg.push(false)
                    }
                    this_.$set(this_.isMyChooseImg,index,!this_.isMyChooseImg[index]);
                    
                    return false;
                }
            },
            imgdeluse(ev,index){
                this.imgusedom=ev;
                var this_=this;
                this.$set(this.isMyDelChooseImg,index,!this.isMyDelChooseImg[index]);
                this.checkimgnumFn();
            },
            checkimgnumFn(){
                var this_=this;
                this_.checkimgnum=0;
                for(var i=0;i<this_.isMyDelChooseImg.length;i++){
                    if(this_.isMyDelChooseImg[i]==true){
                        this_.checkimgnum++
                    }
                }
            },
            checknumFn(){
                var this_=this;
                this_.checkimgnum=0;
                if(this.allChooseImgFlg){
                    for(var i=0;i<this.myimagearr.length;i++){
                        this.$set(this.isMyDelChooseImg,i,true);
                        if(this_.isMyDelChooseImg[i]==true){
                            this_.checkimgnum++
                        }
                    }
                }else{
                    for(var i=0;i<this.myimagearr.length;i++){
                        this.$set(this.isMyDelChooseImg,i,false);
                        if(this_.isMyDelChooseImg[i]==false){
                            this_.checkimgnum=0;
                        }
                    }
                }
                
            },
            checkspFn(){
                var this_=this;
                this_.checkimgnum=0;
                if(this.allChooseVideoFlg){
                    for(var i=0;i<this.uploadsptk.length;i++){
                        this.$set(this.spcurrentchoose,i,true);
                        if(this_.spcurrentchoose[i]==true){
                            this_.checkimgnum++
                        }
                    }
                }else{
                    for(var i=0;i<this.uploadsptk.length;i++){
                        this.$set(this.spcurrentchoose,i,false);
                        if(this_.spcurrentchoose[i]==false){
                            this_.checkimgnum=0;
                        }
                    }
                }
              
            },
            delimgFn(){
                var ids="";
                for(var i=0;i<this.isMyDelChooseImg.length;i++){
                    if(this.isMyDelChooseImg[i]==true){
                        ids+=this.myimagearr[i].id+",";
                    }
                }
                if(ids==""){
                    this.$Message.error("请您先选择照片！");
                    return;
                }
                this.$Modal.confirm({
                    width:"320",
                    content: "<p>确定要删除这几个照片吗？</p>",
                    onOk: () => {
                        var this_=this;
                        this.$http.get(global.host+"/picture/material/delete?ids="+ids,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            if(this.myimgdata == Math.ceil(this.myimagearrtotal/15)){
                                if((this.myimagearrtotal%15 == 0 && ids.split(',').length == 16)||this.myimagearrtotal%15 == ids.split(',').length-1){
                                    if(this.myimgdata == 1){
                                        this.myimgdata =1;
                                    }else{
                                        this.myimgdata = this.myimgdata -1;                                    
                                    }
                                }                                
                            }
                            this.allChooseImgFlg =false;
                            //this_.editspsingle=response.body.result
                            //this_.myimagearr.splice(index,1)
                            this.myimgfn(this.myimgdata)
                            this_.checkimgnum=0;
                        })
                        .catch(function (response) {
                        })
                    },
                    onCancel: () => {
                    }
                });
            },
            imgusesuc(){
                var this_=this;
                var ids="";
                for(var i=0;i<this_.isMyChooseImg.length;i++){
                    if(this_.isMyChooseImg[i]==true){
                        ids+=this.myimagearr[i].id+","
                    }
                }
                if(ids==""){
                    if(this.imgdialogflag){
                        this.$Message.error("请您选择图片");
                        
                    }else{
                        this.$Message.error("请您先完成管理");                       
                    }
                    return;
                }
                var h=this_.imgusedom.target.parentNode.previousElementSibling.previousElementSibling.naturalHeight;
                var w=this_.imgusedom.target.parentNode.previousElementSibling.previousElementSibling.naturalWidth;
                var transformstyle=this_.imgusedom.target.parentNode.previousElementSibling.previousElementSibling.style.transform
                if(w<=140&&h<=140){
                    w=w*1.5+"px";h=h*1.5+"px";}
                else if(w||h>140){
                    if(w<=h){
                        h="210px";
                        w="auto";
                    }
                    else {
                        w="210px";
                        h="auto";
                    }
                }
                if(this.photoimgtype==1){
                    this_.photoModal=false;
                    
                   this.$http.post(global.host+"/picture/material/batchUse",{"cemeteryId":this.cemeteryId,"moduleId":this.mkid,"ids":ids},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {
                        // var a={
                        //     "albumPath":this.imglocation[index].sourcePath,
                        //     "albumDesc":this.imglocation[index].description,
                        //     "authorityLevel":this.imglocation[index].authorityLevel,
                        //     "id":response.body.id,
                        //     "accountId":this.imglocation[index].accountId,
                        //     "albumName":this.imglocation[index].name,
                        //     "imageStyle":this.imglocation[index].imageStyle
                        // }
                        //this_.imagearr.splice(0,0,a);
                        this.queryPhoto(this_.managePhotoPage);
                    })
                    .catch(function (response) {
                    })
                }
                else if(this.photoimgtype==2){
                    
                    

                    this_.photoModal=false;
                    var a=(new Date().getTime()+Math.floor(Math.random()*10000).toString()).toString();
                    this_.headerimage.push({"picSourcePath":this_.myimagearr[this_.imguseindex].sourcePath,"id":a.substr(8,9),"picStyle":{"width":w,"transform":transformstyle,"top":"","height":h,"left":"","position":"absolute","zIndex":this.zdindex++}});
                    this_.savedate.templateModulePicDTO=this_.headerimage
                    this_.advanceFN(this,this_.savedate);
                    setTimeout(function(){
                        document.querySelectorAll(".imgclick")[this_.headerimage.length-1].click();
                    },200)
                }
                else if(this.photoimgtype==3){
                    this_.photoModal=false;
                    this.savedate.headerStyle.backgroundImage="url("+this_.imgurl+this_.myimagearr[this_.imguseindex].sourcePath+")";
                    this.savedate.headerStyle.backgroundRepeat="no-repeat";
                    this.savedate.headerStyle.backgroundPositionX="center";
                    this.savedate.headerStyle.backgroundPositionY="center";
                    this_.advanceFN(this,this.savedate);
                }
                else if(this.photoimgtype==4){
                    this_.photoModal=false;
                    this_.savedate[this.currenticon]=this_.myimagearr[this_.imguseindex].sourcePath;
                    this_.advanceFN(this,this.savedate)
                    
                }
                else if(this.photoimgtype==5){
                    this_.photoModal=false;
                    this_.$set(this_.headerimage[this.textindex],'picSourcePath',this_.myimagearr[this_.imguseindex].sourcePath);
                    this_.headerimage[this.textindex].picStyle={"width":w,"top":this_.headerimage[this.textindex].picStyle.top,"transform":transformstyle,"height":h,"left":this_.headerimage[this.textindex].picStyle.left,"position":"absolute","zIndex":this_.headerimage[this.textindex].picStyle.zIndex};
                    this_.advanceFN(this,this.savedate);
                    setTimeout(function(){
                        document.querySelectorAll(".imgclick")[this_.textindex].click();
                    },200)

                }
                if(this.photoimgtype==1){
                    for(var i=0;i<this_.imguseindex.length;i++){
                        this_.latelyUse(1,this_.myimagearr[this_.imguseindex[i]]);
                    }
                    
                }
                else{
                    this_.latelyUse(1,this_.myimagearr[this_.imguseindex]);
                }
                
                this_.imguseindex=[];
            },
            cloudimguse(ev,index){
                this.imgusedom=ev;
                var this_=this;
                
                if(this.photoimgtype==1){
                    this_.imguseindex.push(index);
                    this.$set(this.isMyChooseImg,index,!this.isMyChooseImg[index]);
                }
                else{
                    this_.imguseindex=index;
                    if(this_.isMyChooseImg[this_.imguseindex]){
                        this_.$set(this_.isMyChooseImg,index,!this_.isMyChooseImg[index]);
                        return;
                    }
                    this_.isMyChooseImg=[];
                    for(var i = 0; i < this.syrimagearr.length; i++){
                        this_.isMyChooseImg.push(false)
                    }
                    this_.$set(this_.isMyChooseImg,index,!this_.isMyChooseImg[index]);
                    return false;
                }
            },
            cloudimgusesuc(){
                var this_=this;
                var flag=true;
                for(var i=0;i<this_.isMyChooseImg.length;i++){
                        if(this_.isMyChooseImg[i]==true){
                            flag=false
                        }
                    }
                if(flag){
                        this.$Message.error("请您选择图片");
                        return;
                }
                var h=this_.imgusedom.target.parentNode.previousElementSibling.naturalHeight;
                var w=this_.imgusedom.target.parentNode.previousElementSibling.naturalWidth;
                var transformstyle=this_.imgusedom.target.parentNode.previousElementSibling.style.transform
                if(w<=140&&h<=140){
                    w=w*1.5+"px";h=h*1.5+"px";}
                else if(w||h>140){
                    if(w<=h){
                        h="210px";
                        w="auto";
                    }
                    else {
                        w="210px";
                        h="auto";
                    }
                }
                if(this.photoimgtype==1){
                    this_.photoModal=false;
                    var ids="";
                    for(var i=0;i<this_.isMyChooseImg.length;i++){
                        if(this_.isMyChooseImg[i]==true){
                            ids+=this.syrimagearr[i].id+","
                        }
                    }
                   this.$http.post(global.host+"/picture/material/batchUse",{"cemeteryId":this.cemeteryId,"moduleId":this.mkid,"ids":ids},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {
                        // var a={
                        //     "albumPath":this.imglocation[index].sourcePath,
                        //     "albumDesc":this.imglocation[index].description,
                        //     "authorityLevel":this.imglocation[index].authorityLevel,
                        //     "id":response.body.id,
                        //     "accountId":this.imglocation[index].accountId,
                        //     "albumName":this.imglocation[index].name,
                        //     "imageStyle":this.imglocation[index].imageStyle
                        // }
                        //this_.imagearr.splice(0,0,a);
                        this.queryPhoto(this_.managePhotoPage);
                    })
                    .catch(function (response) {
                    })
                }
                else if(this.photoimgtype==2){
                    this_.photoModal=false;
                    var a=(new Date().getTime()+Math.floor(Math.random()*10000).toString()).toString();
                    this_.headerimage.push({"picSourcePath":this_.syrimagearr[this_.imguseindex].sourcePath,"id":a.substr(8,9),"picStyle":{"width":w,"transform":transformstyle,"top":"","height":h,"left":"","position":"absolute","zIndex":this.zdindex++}});
                    this_.savedate.templateModulePicDTO=this_.headerimage
                    this_.advanceFN(this,this_.savedate)
                }
                else if(this.photoimgtype==3){
                    this_.photoModal=false;
                    this.savedate.headerStyle.backgroundImage="url("+this_.imgurl+this_.syrimagearr[this_.imguseindex].sourcePath+")";
                    this.savedate.headerStyle.backgroundRepeat="no-repeat";
                    this.savedate.headerStyle.backgroundPositionX="center";
                    this.savedate.headerStyle.backgroundPositionY="center";
                    this_.advanceFN(this,this.savedate);
                }
                else if(this.photoimgtype==4){
                    this_.photoModal=false;
                    this_.savedate[this.currenticon]=this_.syrimagearr[this_.imguseindex].sourcePath;
                    this_.advanceFN(this,this.savedate)
                    
                }
                else if(this.photoimgtype==5){
                    this_.photoModal=false;
                    this_.$set(this_.headerimage[this.textindex],'picSourcePath',this_.syrimagearr[this_.imguseindex].sourcePath);
                    this_.headerimage[this.textindex].picStyle={"width":w,"top":this_.headerimage[this.textindex].picStyle.top,"transform":transformstyle,"height":h,"left":this_.headerimage[this.textindex].picStyle.left,"position":"absolute","zIndex":this_.headerimage[this.textindex].picStyle.zIndex};
                    this_.advanceFN(this,this.savedate);
                    setTimeout(function(){
                        document.querySelectorAll(".imgclick")[this_.textindex].click();
                    },200)
                }
                if(this.photoimgtype==1){
                    for(var i=0;i<this_.imguseindex.length;i++){
                        this_.latelyUse(1,this_.syrimagearr[this_.imguseindex[i]]);
                    }
                    
                }
                else{
                    this_.latelyUse(1,this_.syrimagearr[this_.imguseindex]);
                }
                
                this_.imguseindex=[];
            },
            imgphototype(id){
                if(id==1){
                    this.myimgfn(this.myimgdata);
                }
                if(id==2){
                    this.myimgfn(this.myimgdata);
                    if(this.typeshow==1||this.typeshow==2){
                        this.photoModal=true;
                        this.photoimgtype=id;
                        this.photocurrent = 1;
                    }
                    return;
                }
                if(id==3){//1当前页，2是code背景
                    this.myimagefn(1,2,'')
                }
                if(id==4){
                    this.myimagefn(1,3,'')
                }
                if(id==5){
                    this.myimgfn(this.myimgdata);
                }
                this.checkimgnum=0;
                this.photoModal=true;
                this.photoimgtype=id;
                
            },
            videooverFN(){//视频完成管理
                this.videoAllchoose = false;
                this.manageVideo=false;
                this.isChoosevideoNum=0;
                this.isChoosevideo=[];
            },
            mysppagefn(value){
                this.myspfn(value,this.myspflag,this.spflag)
            },
            myspfn(value,num,flag){//value当前页,num 2是头部的使用视频,flag是不是替换视频
                var this_=this;
                this_.checkimgnum=0;
                this.myspflag=num;
                this.spflag=flag;
                this.spdialogflag=true;
                this.myspdataindex=value;
                this.spCurrent = parseInt(value);
                this.spRight=true;
                this.topClass = "topP on";
                this.topClass1 = "topP";
                if(num==2){
                     if(this.typeshow==1||this.typeshow==2){
                        this_.spModal=true;
                        this.spindex=num;
                        this.$http.get(global.host+"/video/material/query/account?startPage="+value,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                            .then((response) => {
                                this.mysparr=response.body.result;
                                this.mysparrtotal=response.body.total;
                                this.spcurrentchoose=[];
                                for(var i = 0; i < this.mysparr.length; i++){
                                    
                                    this.spcurrentchoose[i]=false;
                                }
                            })
                            .catch(function (response) {
                            })
                    }
                    return;
                }
                this_.spModal=true;
                this.spindex=this.myspflag;
                this.$http.get(global.host+"/video/material/query/account?startPage="+value+"&cemeteryId="+this.cemeteryId+"&moduleId="+this.mkid,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
					.then((response) => {
                        this.mysparr=response.body.result;
                        this.mysparrtotal=response.body.total;
                        this.spcurrentchoose=[];
                        for(var i = 0; i < this.mysparr.length; i++){
                            this.spcurrentchoose[i]=false;
                        }
                     })
					.catch(function (response) {
					})
                
            },
            userspbtn(item,index){
                var this_=this;
                this.spcurrentdata=item;
                if(this.myspflag==1){
                    this.spcurrentindex.push(index);
                }
                else{
                    this.spcurrentindex=index;
                }
                
                this.$set(this.spcurrentchoose,index,!this.spcurrentchoose[index]);
                this_.checkimgnum=0;
                for(var i=0;i<this.spcurrentchoose.length;i++){
                    if(this.spcurrentchoose[i]==true){
                        this_.checkimgnum++
                    }
                }
            },
            userspbtnsucFn(obj){//2是最近使用，1是我的上传
                var checknum;
                var this_=this;
                if(obj==1){
                    checknum=this_.uploadsptk;
                }
                else{
                    checknum=this_.splocation;
                }
                if(!this.spdialogflag){
                    this.$Message.error("请您先完成管理！");
                    return;
                }
                
                var a=(new Date().getTime()+Math.floor(Math.random()*10000).toString()).toString();
                var ids="";
                
                for(var i=0;i<this.spcurrentchoose.length;i++){
                    if(this.spcurrentchoose[i]==true){
                        ids+=checknum[i].id+",";
                    }
                }
                if(ids==""){
                    this.$Message.error("请您先选择视频！");
                    return;
                }
                if(this.myspflag==1){
                    this.$http.post(global.host+"/video/material/batchUse",{"moduleId":this_.mkid,"ids":ids,"cemeteryId":this.cemeteryId},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
					.then((response) => {
                        this.queryVideo();
                     })
					.catch(function (response) {
					})
                }
                else{
                    if((this.typeshow==1||this.typeshow==2)&&!this.spflag){
                        this.headersp.push({"videoPath":this.mysparr[this.spcurrentindex].videoPath,"id":a.substr(8,9),"videoPicSourcePath":this.mysparr[this.spcurrentindex].videoPicPath,"videoStyle":{"width":"100%","top":"","height":"","left":"","position":"absolute","zIndex":this.zdindex++}});
                        this.savedate.templateModuleVideoDTO=this.headersp
                        this.advanceFN(this,this.savedate)
                    }
                    else{
                        this.headersp[this.textindex]={"videoPath":this.mysparr[this.spcurrentindex].videoPath,"id":a.substr(8,9),"videoPicSourcePath":this.mysparr[this.spcurrentindex].videoPicPath,"videoStyle":{"width":"100%","top":"","height":"","left":"","position":"absolute","zIndex":this.zdindex++}};
                        this.savedate.templateModuleVideoDTO=this.headersp
                        this.advanceFN(this,this.savedate)
                    }
                }
                if(this.myspflag==1){
                    for(var i=0;i<this_.spcurrentindex.length;i++){
                        this_.latelyUse(2,this_.uploadsptk[this_.spcurrentindex[i]]);
                    }
                    
                }
                else{
                    this_.latelyUse(2,checknum[this_.spcurrentindex]);
                }
                this.spModal=false;
            },
            zdFn(){
                if(this.zddom=="")return;
                this.zdindex=this.zdindex+2
                this.$set(this.currentel[this.currentelstr],"zIndex",this.zdindex);
                this.advanceFN(this,this.savedate);
            },
            divcenterFn(){
                if(this.zddom=="")return;
                this.$set(this.currentel[this.currentelstr],"left",($(".photoboxwarp .photocontent").width()-parseInt($(this.zddom).width()))/2+'px');
                this.advanceFN(this,this.currentel);
                this.zddom.previousElementSibling.style.left=($(".photoboxwarp .photocontent").width()-parseInt($(this.zddom).width()))/2+'px';
                //this.currentel[this.currentelstr].left=$(".warpboxpannel").width()-parseInt(this.zddom.getBoundingClientRect().width)/2+'px';

            },
            delimg(item,index){
                var this_=this;
                this.textindex=index;
                this.currentelstr="picStyle";
                this.$http.post(global.host+"/template/delete/elements/style",{"style":this.currentelstr,id:item.id,moduleId:this.savedate.moduleId,templateId:this.templateid,templateType:this.savedate.type,elementType:2},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {
                        if(response.body.status == 1){
                            this.savedate.templateModulePicDTO.splice(this.textindex,1);
                            
                        }else{
                            this.$Messgae.error(response.body.message);
                        }
                        
                    })
                    .catch(function (response) {
                })
            },
            deldomFn(){//删除元素
                
                var this_=this;
                
                if(!this.domdata||this.currentelstr=="introductionDayStyle"){
                    return;
                }
                var this_=this;
                var tempnum;
                var tempid;
                var mkid;


                if(!this.delflag){//不是自定义样式
                    tempnum="";
                    tempid=""
                    mkid=this_.currentel["moduleId"]
                }
                else{//自定义样式
                    //1文字，2是图片，3是视频
                    if(this.textzddata=="templateModuleContent"){
                        tempnum=1;
                    }
                    else if(this.textzddata=="templateModulePicDTO"){
                        tempnum=2;
                    }
                    else{
                        tempnum=3;
                    }
                    tempid=this_.savedate[this.textzddata]?this_.savedate[this.textzddata][this.textindex]["id"]:"";
                    mkid=this.savedate["moduleId"]
                }
                this.$http.post(global.host+"/template/delete/elements/style",{"style":this.currentelstr,id:tempid,moduleId:mkid,templateId:this.templateid,templateType:this.savedate.type,elementType:tempnum},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {
                        if(response.body.status == 1){
                            if(!this.delflag){//不是自定义样式
                            //this.savedate[this.currentelstr]=response.body.result
                            this.$set(this.domdata,this.deldomdata,'');
                                this.$set(this.domdata,this.deldomstyle,response.body.result)
                            }
                            else{//自定义样式
                                this_.savedate[this.textzddata][this.textindex][this.currentelstr]=response.body.result
                                this.domdata.splice(this.textindex,1);
                            }
                            this.advanceFN(this_,this_.savedate)
                            this.wraphide()
                        }else{
                            this.$Messgae.error(response.body.message);
                        }
                        
                    })
                    .catch(function (response) {
                })

                
                
            },
            deldom(ev,data,index,style,zd){//删除元素赋值
                //$(".resize-panel").hide()

                this.texthide=false;
                this.breviarytext=false;
                if(!data){
                    return;
                }
                if(zd){this.delflag=false;}else{
                    this.delflag=true
                }
                this.currentel=data
                this.currentelstr=style
                this.zddom=ev.target;//置顶功能DIV
                if(/\d/g.test(index)){
                    this.deldomdata=index;
                    this.domdata=data;
                    this.deldomstyle=style;
                }
                else{
                    this.deldomdata=index;
                    this.domdata=data;
                    this.deldomstyle=style;
                }
                this.textindex="";
            },
            imgdialogShow(style){//照片集设计组件弹窗
                this.currentel=this.savedate
                this.currentelstr=style
                this.imghide = false;//先关掉不让显示出来
            },
            imgdialogHide(){
                this.imghide = false;
            },
            sjzdialogShow(obj){
                this.sjzhide = true;
                var datajson=Object.assign({}, obj);
                //datajson.borderBottomWidth=parseInt(datajson.borderBottomWidth)
                this.$refs.sjzdialogFN.showtext(datajson)
                
            },
            xqsjzdialogShow(){
                this.sjzhide = false;
            },
            emitFn(flag){
                this.texthide=flag
            },
            textboldFn(){
                if(this.breviarysytle.fontWeight == "bold"){
                    this.$set(this.breviarysytle,'fontWeight','normal');                   
                }else{
                    this.$set(this.breviarysytle,'fontWeight','bold');                    
                }
            },
            textqxFn(){
                if(this.breviarysytle.fontStyle == "italic"){
                    this.$set(this.breviarysytle,'fontStyle','normal');                   
                }else{
                    this.$set(this.breviarysytle,'fontStyle','italic');                    
                }               
            },
            textxhxFn(){
                if(this.breviarysytle.textDecoration == "underline"){
                    this.$set(this.breviarysytle,'textDecoration','none');                   
                }else{
                    this.$set(this.breviarysytle,'textDecoration','underline');                    
                }                  
            },
            textscxFn(){
                if(this.breviarysytle.textDecoration == "line-through"){
                    this.$set(this.breviarysytle,'textDecoration','none');                   
                }else{
                    this.$set(this.breviarysytle,'textDecoration','line-through');                    
                }
            },
            alginflagFn(){
                this.alginflag=!this.alginflag;
                this.lhflag=false;
                this.learflag=false;
                this.textboxBg=false;
            },
            checkimgdataFn(obj){
                this.alginflag=false;
                this.breviarysytle.textAlign=obj;
            },
            lhFn(){
                this.lhflag=!this.lhflag;
                this.alginflag=false;
                this.learflag=false;
                this.textboxBg=false;
            },
            learFn(){
                this.learflag=!this.learflag;
                this.alginflag=false;
                this.lhflag=false;
                this.textboxBg=false;
            },
            learflag(){
                this.learflag=true;
                this.alginflag=false;
                this.lhflag=false;
                this.textboxBg=false;
            },
            checklhdata(obj){
                this.lhflag=false;
                this.breviarysytle.lineHeight=obj+"px"
            },
            checklearFn(obj){
                this.learflag=false;
                this.breviarysytle.letterSpacing=obj+"px"
            },
            checkiconFn(flag){//获取ICON图片
                if(flag==1){
                    this.iconflag=true;
                    this.iconcheckstr=1;
                    this.$http.get(global.host+"/common/icon/query",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            this.tempimgdata=response.body.result.icon;
                            this.tempimgdatahui=response.body.result.unselected;
                        })
                        .catch(function (response) {
                    })
                }else{
                    this.iconcheckstr="";
                    this.imgphototype(4)
                }
                
            },
            iconclickFn(index){//点击ICON图片
                if(this.iconcheckstr==1){
                    this.savedate.moduleSwiperIcon0Path=this.tempimgdata[index]
                    this.savedate.moduleSwiperIcon1Path=this.tempimgdatahui[index]
                }
                else{
                    this.savedate[this.currenticon]=this.tempimgdata[index];

                }
               
            },
            stylesjzFn(style){
                this.savedate.moduleSwiperDiv2Style=style;
            },
            advanceFN(athis,obj){//前进后退数据堆进去
                obj.templateModulePicDTO?obj.templateModulePicDTO:[];
                obj.templateModuleVideoDTO?obj.templateModuleVideoDTO:[];
                var this_=this;
                if(athis.advancedata.length>9){
                    athis.advancedata.splice(0,1);
                    athis.advancedata.push(athis.clone(obj));

                }
                else{
                    athis.advancedata.push(athis.clone(obj));
                }
                athis.advanceindex=athis.advancedata.length-1;
                
            },
            advancebtnFN(){//后退按钮
                var this_=this;
                if(this_.advanceindex<=0){
                    return false;
                }
                else{
                    
                    this_.advanceindex--;
                    this_.savedate=this_.advancedata[this_.advanceindex]
                    this_.headerimage=this_.savedate.templateModulePicDTO?this_.savedate.templateModulePicDTO:[];

                    this_.headersp=this_.savedate.templateModuleVideoDTO?this_.savedate.templateModuleVideoDTO:[];
                    this_.headerstyle[this_.deltemplaceindex]=this_.savedate
                    this.wraphide()
                }
            },
            qjFN(){
               var this_=this;
                if(this.advanceindex>9||this.advanceindex==this.advancedata.length-1){
                    return false;
                }
                else{
                     this.advanceindex++;
                    this.savedate=this.advancedata[this.advanceindex];
                    this_.headerimage=this_.savedate.templateModulePicDTO?this_.savedate.templateModulePicDTO:[];

                    this_.headersp=this_.savedate.templateModuleVideoDTO?this_.savedate.templateModuleVideoDTO:[];
                    this_.headerstyle[this_.deltemplaceindex]=this_.savedate
                    this.wraphide()
                }
               
            },
            clone(obj){//复制对象
                var o;
                if (typeof obj == "object") {  
                    if (obj === null) {  
                        o = null;  
                    } else {  
                        if (obj instanceof Array) {  
                            o = [];  
                            for (var i = 0, len = obj.length; i < len; i++) {  
                                o.push(this.clone(obj[i]));  
                            }  
                        } else {  
                            o = {};  
                            for (var j in obj) {  
                                o[j] = this.clone(obj[j]);  
                            }  
                        }  
                    }  
                } else {  
                    o = obj;  
                }  
                return o;  
            },
            rsltcheckFn(index){
                this.iconcheckflag=index;
                this.Singlere=this.reltdata[index]
            },
            bfylFn(){//播放预览按钮
                this.$refs.editheadername.releasebtn(1)
                // var arr = new Array();
                // var arr2 = new Array();
                // for(var i=0;i<this.doubleCemeteryList.length;i++){
                //     arr.push(this.doubleCemeteryList[i].cemeteryId);
                //     arr2.push(this.doubleCemeteryList[i].templateId);
                // }
                // this.$http.post(global.host+"/cemeteryOwner/play/view",{"status":2,"template":arr2.join(','),"cemeteryId":arr.join(',')},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                // .then((response) => {
                //     this.bfyldata=response.body.qrcode;
                //     this.sessionId=response.body.sessionId;
                //     this.iconcheckstr=1;
                //     this.bfyldataflag=true;
                //     this.status=2;
                // })
                // .catch(function (response) {
                // })
            },
            closeiconFn(){
                this.iconflag=false;
            },
            icontitleFn(str){
                this.currenticon=str;
                this.iconcheckstr=2;
                this.checkiconFn(2)
                
            },
            savetemplateFn(type,index,moduleId,flag){//自动保存接口(type:点击的模块索引，index：当前模块的索引，moduleId:当前模块ID，flag为true说明有回调)
                var this_=this;
                this_.datastyleFN=this_.$refs['imgdialog'].subbtnFn
                if(!this.dsflag){
                    return;
                }
                 /*切换模块  chooseLeftIndex:离开的模块数据 也就是现在的新数据
                           type:点击的模块类型，moduleId:点击的模块ID
                */
                // alert('进来了');
                if(this.chooseLeftIndex.type == '3' || this.chooseLeftIndex.type == '5' || this.chooseLeftIndex.type == '6'){
                     var a = this.chooseLeftIndex.templateId + this.chooseLeftIndex.moduleIcon + this.chooseLeftIndex.headerStyle + this.chooseLeftIndex.moduleId;
                     var b = this.personDataOld.templateId + this.personDataOld.moduleIcon + this.personDataOld.headerStyle + this.personDataOld.moduleId;
                     if(a == b){
                        // alert('照片视频作品模块无修改');
                        this.typeshow=type;
                        this.deltemplaceindex=index;
                        this.mkid=moduleId;
                        this.checktypeFN(this.typeshow,this.deltemplaceindex,this.mkid);
                        this.chooseLeftIndex = this.headerstyle[index];
                        // this.personDataOld = Object.assign({},this.headerstyle[index])  
                        if(flag==true){
                            this.callbackFN(this.callbackparameter);
                        }
                        return;
                    }
                }else{
                    if(JSON.stringify(this.chooseLeftIndex) == JSON.stringify(this.personDataOld)){
                        // alert('个人简介墓志铭无修改');
                        this.typeshow=type;
                        this.deltemplaceindex=index;
                        this.mkid=moduleId;
                        this.checktypeFN(this.typeshow,this.deltemplaceindex,this.mkid);
                        this.chooseLeftIndex = this.headerstyle[index];
                        // this.personDataOld = Object.assign({},this.headerstyle[index])  
                        if(flag==true){
                            this.callbackFN(this.callbackparameter);
                        }
                        return;
                    }
                }
                if(this.chooseLeftIndex.type=="1"){
                    this.saveperson(type,index,moduleId,flag);
                }
                else if(this.chooseLeftIndex.type=="2"){
                    this.mzbfn(type,index,moduleId,flag);
                }
                else if(this.chooseLeftIndex.type=="3"){
                    this.datastyleFN(type,index,moduleId,flag);
                    this_.chooseLeftIndex = this_.headerstyle[index]
                    // this.$Message.success('编辑成功');
                }
                else if(this.chooseLeftIndex.type=="4"){
                    this.saversltstyle(type,index,moduleId,flag)
                }
                else if(this.chooseLeftIndex.type=="5"){
                    this.datastyleFN(type,index,moduleId,flag);
                    this_.chooseLeftIndex = this_.headerstyle[index]
                    // this.$Message.success('编辑成功');                   
                }
                else if(this.chooseLeftIndex.type=="6"){
                    this.datastyleFN(type,index,moduleId,flag);
                    this_.chooseLeftIndex = this_.headerstyle[index]
                    // this.$Message.success('编辑成功');                    
                }
            },
            checkdsx(item,index,flag){//单双穴切换
                var this_=this;
                this.dscheckactive = index;
                //先保存然后回调方法
                this.callbackFN=function(){
                    this_.$router.push({ path: '/templateEdit' ,query:{"nid":item.templateId,"mid":item.cemeteryId}});//跳转传记页面
                };
                this.callbackparameter="";
                this.savetemplateFn(this.typeshow,this.deltemplaceindex,this.mkid,true)
                
                //滚动条置顶
                if(flag){
                    this.ismusicPlay = true;
                    this.$refs['preview'].scrollTopFn();
                }
                 
            },
            clearstyleFn(){//
                var this_=this;
                var tempnum;
                var tempid;
                var mkid;
                if(this.textindex===""){//不是自定义样式
                    tempnum="";
                    tempid=""
                    mkid=this_.currentel["moduleId"]
                }
                else{//自定义样式
                    if(this.textzddata=="templateModuleContent"){
                        tempnum=1;
                    }
                    else if(this.textzddata=="templateModulePicDTO"){
                        tempnum=2;
                    }
                    else{
                        tempnum=3;
                    }
                    tempid=this_.savedate[this.textzddata]?this_.savedate[this.textzddata][this.textindex]["id"]:"";
                    mkid=this.savedate["moduleId"]
                }
                this.$http.post(global.host+"/template/clear/elements/style",{"style":this.currentelstr,id:tempid,moduleId:mkid,templateId:this.templateid,templateType:this.typeshow,elementType:tempnum},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                    .then((response) => {
                        if(response.body.status == 1){
                            if(this.textindex===""){//不是自定义样式
                            this.$set(this.savedate,this.currentelstr,response.body.result);
                            this.breviarysytle=response.body.result;
                            }
                            else{//自定义样式
                                response.body.result.zIndex=this_.zdindex
                                this_.savedate[this.textzddata][this.textindex][this.currentelstr]=response.body.result;
                                this.breviarysytle=response.body.result;
                            }
                            this.wraphide()
                            this.texthide=false;
                            //this.fontSize=response.body.result;
                        }else{
                            this.$Messgae.error(response.body.message);
                        }
                        
                    })
                    .catch(function (response) {
                })
            },
            clearrsStyle(){
                this.$http.post(global.host+"/template/clear/elements/style",{"style":'moduleSwiperDiv2Style','id':'','moduleId':this.mkid,'templateId':this.templateid,'templateType':this.typeshow,'elementType':''},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    this.savedate['moduleSwiperDiv2Style']=response.body.result;
                })
                .catch(function (response) {
                })
            },
            tranfromFNimg(id,item,index,flag){
                var temp=Number(item[index].imageStyle.transform.match(/-?[0-9]+/g).join("-"));
                
                if(flag){
                    if(temp!=0&&temp<360){
                        temp=temp+90
                        item[index].imageStyle={transform:"rotate("+temp+"deg)"};
                    }
                    else{
                        temp=0;
                        temp=temp+90
                        item[index].imageStyle={transform:"rotate("+temp+"deg)"};
                    }
                    
                }
                else{
                    if(temp==-360){
                        temp=0;
                        temp=temp-90;
                        item[index].imageStyle={transform:"rotate("+temp+"deg)"};
                    }
                    else{
                        temp=temp-90
                        item[index].imageStyle={transform:"rotate("+temp+"deg)"};
                    }
                }
                var tempstr={"transform":"rotate("+temp+"deg)"};
                
                this.$http.post(global.host+"/picture/material/rotate",{"id":id,"imageStyle":JSON.stringify(tempstr)},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    
                })
                .catch(function (response) {
                })

            },
            tranfrommobileFn(){
                
                var this_=this;
                var temp;
                var style;
                if(this.textindex===""){//不是自定义样式
                    temp=Number(this.savedate[this.currentelstr].transform.match(/-?[0-9]+/g).join("-"));
                    style=this.savedate[this.currentelstr]
                }
                else{//自定义样式
                    temp=Number(this_.savedate[this.textzddata][this.textindex][this.currentelstr].transform.match(/-?[0-9]+/g).join("-"));
                    style=this_.savedate[this.textzddata][this.textindex][this.currentelstr];
                    
                }
                if(temp!=0&&temp<360){
                    temp=temp+90
                    style.transform="rotate("+temp+"deg)";
                    this_.zddom.previousElementSibling.style.transform="rotate("+temp+"deg)";
                }
                else{
                    temp=0;
                    temp=temp+90;
                    style.transform="rotate("+temp+"deg)";
                    this_.zddom.previousElementSibling.style.transform="rotate("+temp+"deg)";
                }
                this.advanceFN(this_,this_.savedate);
            },
            tranfromFN(id,item,index,flag){
                var this_=this;
                var temp=Number(item[index].imageStyle.transform.match(/-?[0-9]+/g).join("-"));
                
                if(flag){
                    if(temp!=0&&temp<360){
                        temp=temp+90
                        item[index].imageStyle={transform:"rotate("+temp+"deg)"};
                    }
                    else{
                        temp=0;
                        temp=temp+90
                        item[index].imageStyle={transform:"rotate("+temp+"deg)"};
                    }
                    
                }
                else{
                    if(temp==-360){
                        temp=0;
                        temp=temp-90;
                        item[index].imageStyle={transform:"rotate("+temp+"deg)"};
                    }
                    else{
                        temp=temp-90
                        item[index].imageStyle={transform:"rotate("+temp+"deg)"};
                    }
                }
                var tempstr={"transform":"rotate("+temp+"deg)"};
                
                this.$http.post(global.host+"/cemetery/template/relativesAblum/rotate",{"id":id,"imageStyle":JSON.stringify(tempstr)},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    this_.queryPhoto(this_.managePhotoPage);
                })
                .catch(function (response) {
                })
            },
            manageImgDialogFn(){
                this.checkimgnum=0;
                this.isMyDelChooseImg=[];//清空选中状态
                this.allChooseImgFlg = false;
                this.imgdialogflag=!this.imgdialogflag;
            },
            manageSpDialogFn(){
                this.checkimgnum=0;
                this.spcurrentchoose=[];//清空选中状态
                this.allChooseVideoFlg = false;
                this.spdialogflag=!this.spdialogflag;
            },
            dragvue(evt){
                var ids="";
                var indexs="";

                for(var i=0;i<this.imagearr.length;i++){
                    ids+=this.imagearr[i].id+",";
                    indexs+=i+(20*[this.imageCurrent-1])+",";
                }
                console.log(ids);
                console.log(indexs);
                // return;
                // var olddata=this.imagearrclone[evt.oldIndex];
                // var newdata=this.imagearrclone[evt.newIndex];  
                // this.$set(this.imagearr,evt.oldIndex,newdata);
                // this.$set(this.imagearr,evt.newIndex,olddata);
                for(var i = 0; i < this.isChooseimg.length; i++){
                    this.isChooseimg[i]=false;
                }
                this.isChooseimgNum = 0; 
                this.photoAllchoose=false;
                this.savedate.photos=this.imagearr;
                this.$http.post(global.host+"/cemetery/template/relativesAblum/resort",{"moduleId":this.mkid,"ids":ids,"indexs":indexs,"cemeteryId":this.cemeteryId},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    this.queryPhoto(this.managePhotoPage)
                })
                .catch(function (response) {
                })
                
            },
            dragvueVideo(evt){
                var ids="";
                var indexs="";

                for(var i=0;i<this.spdata.length;i++){
                    ids+=this.spdata[i].id+",";
                    indexs+=i+",";
                }
                
                // var olddata=this.spdataClone[evt.oldIndex];
                // var newdata=this.spdataClone[evt.newIndex];  
                for(var i = 0; i < this.isChoosevideo.length; i++){
                    this.isChoosevideo[i]=false;
                }
                this.isChoosevideoNum = 0; 
                this.videoAllchoose=false;
                //this.savedate.photos=this.imagearr;
                this.$http.post(global.host+"/cemetery/template/video/videoResort",{"moduleId":this.mkid,"ids":ids,"indexs":indexs,"cemeteryId":this.cemeteryId},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    this.queryVideo();
                })
                .catch(function (response) {
                })
                
            },
            dragvueVideo2(evt){
                var ids="";
                var indexs="";

                for(var i=0;i<this.uploadsptk.length;i++){
                    ids+=this.uploadsptk[i].id+",";
                    indexs+=i+(20*[this.managePhotoPage-1])+",";
                }
                
                var olddata=this.uploadsptk[evt.oldIndex];
                var newdata=this.uploadsptk[evt.newIndex];  
                for(var i = 0; i < this.spcurrentchoose.length; i++){
                    this.spcurrentchoose[i]=false;
                }
                this.spcurrentchoose = 0; 
                this.videoAllchoose=false;
                //this.savedate.photos=this.imagearr;
                this.$http.post(global.host+"/cemetery/template/video/resort",{"moduleId":this.mkid,"fromId":olddata.id,"toId":newdata.id,"toIndex":newdata.materialSort,"fromIndex":olddata.materialSort,"cemeteryId":this.cemeteryId},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    this.mysppagefn(1)
                    //this.queryPhoto(this.managePhotoPage)
                })
                .catch(function (response) {
                })
            },
            //校验上传视频格式是否正确
            handleFormatError(file){
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + '格式不正确,请上传格式为MP4的视频文件。'
                });
            },
            //选择墓穴类型
            choosetypeFun(){               
                this.ajax3();
            },
            chooseOneType(){//点击单人穴
                // alert("asd");
                this.oneType = "oneType2";
                this.doubleType = "doubleType1 ";
                this.graveType = "1";
            },
            chooseTwoType(){//点击双人穴
                // alert("2");
                this.oneType = "oneType1";
                this.doubleType = "doubleType2";
                this.graveType = "2";
            },
            backmbchoose(){//回到模板选择页
                this.$Modal.confirm({
                    width:"320",
                    content: "<p>确定要返回模板选择页面么？</p>",
                    onOk: () => {
                        this.$router.push({ path: '/templateList' ,query:{"s":this.$route.query.mid}});//跳转传记页面
                    },
                    onCancel: () => {
                    }
                });
            },
            isNeedGuide(){//判断是否需要新手引导
                this.$http.get(global.host+"/account/get/guidingStatus",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    if(response.body.guidingStatus == 0){
                        //需要弹出新手教程
                        this.$refs.editFeedbackRef.openEditCourse();
                    }
                })
                .catch(function (response) {
                })
            },
            setmxtype(){//确定墓穴类型
                if(this.isClick){
                    return;
                }
                this.isClick = true;
                this.$http.get(global.host+"/double/grave/update?cemeteryId="+this.$route.query.mid+"&graveType="+this.graveType+"&templateId="+this.$route.query.nid,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    if(response.body.status == 1){
                        this.choosetype = false;
                        this.isNeedGuide()                       
                        this.ajax3();                        
                    }
                })
                .catch(function (response) {
                })
                setTimeout('this.isClick = false',500);
            },
            //查看大图
            bigImgshwo(url,style,index){
                var _this=this;
                this.bigImgurl = url;
                style.maxWidth="100%";
                style.maxHeight="100%";
                this.bigImgstyle=style;
                this.bigimagearr=this.imagearr;
                this.pageindex=index;
                this.visible = true;

                this.$refs.bigswipername.swiper.onTransitionStart=function(){
                    var swiper=_this.$refs.bigswipername.swiper;
                        if(swiper.isEnd){
                            _this.pagenum++;
                            _this.$http.get(global.host+"/unsecured/mobile/ablum/query?cemeteryId="+_this.cemeteryId+"&moduleId="+_this.mkid+"&startPage="+_this.pagenum+"&pageSize=20")
                            .then((response) => {
                            //_this.headerstyle[swiper.container[0].getAttribute("attr")].photos.push.apply(_this.headerstyle[swiper.container[0].getAttribute("attr")].photos,response.body.result);
                            //_this.$emit("photoFN",swiper.container[0].getAttribute("attr"),response.body.result)
                            _this.bigimagearr.push.apply(_this.bigimagearr,response.body.result);
                            })
                            .catch(function (response) {

                            })
                        }
                    }
            },
            //大图里的小图点击
            bigImgclick(url,style,index){
                this.pageindex=index;
                this.bigImgstyle=style;
                this.bigImgurl = url;
            },
            smailleftclick(){
                if(this.pageindex==0){
                    return;
                }
                
                this.pageindex--
                var nowindex=this.pageindex;
                this.$refs.bigswipername.swiper.slideTo(this.pageindex);
                
                this.bigImgstyle=this.bigimagearr[nowindex].imageStyle;
                this.bigImgurl=this.bigimagearr[nowindex].albumPath;
            },
            smailrightclick(){
                var _this=this;
                this.pageindex++;               
                var nowindex=this.pageindex;
                if(this.pageindex==this.bigimagearr.length-2){
                    _this.pagenum++;
                    _this.$http.get(global.host+"/unsecured/mobile/ablum/query?cemeteryId="+_this.cemeteryId+"&moduleId="+_this.mkid+"&startPage="+_this.pagenum+"&pageSize=20")
                    .then((response) => {
                        
                        _this.bigimagearr.push.apply(_this.bigimagearr,response.body.result);
                        this.bigImgstyle=this.bigimagearr[nowindex].imageStyle;
                        this.bigImgurl=this.bigimagearr[nowindex].albumPath;
                        this.pageindex=nowindex;
                        this.$refs.bigswipername.swiper.slideTo(this.pageindex);                    
                    })
                    .catch(function (response) {

                    })
                    return;
                }         
                if(!this.bigimagearr[this.pageindex]){
                    this.pageindex--;
                    return;
                }
                this.$refs.bigswipername.swiper.slideTo(this.pageindex);                
                this.bigImgstyle=this.bigimagearr[nowindex].imageStyle;
                this.bigImgurl=this.bigimagearr[nowindex].albumPath;
                
            },
            //播放视频
            playvideo(url){
                this.playvideourl = url;
                this.visibleVideo = true;
                // this.$refs['videoDom'].play();                
            },
            suspendVideo(){
                this.$refs['videoDom'].pause();
            },
            // 测试效果
            uploadPhotoError(file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传JPG、JPEG、PNG格式的图片。'
                });
            },
            handleBeforeUpload () {
                // const check = this.imagearr.length < 30;
                // if (!check) {
                //     this.$Notice.warning({
                //         title: '最多只能上传 30 张图片。'
                //     });
                // }
                // return check;
            },
            Chooseimg(page,index,id){
                this.$set(this.isChooseimg,index,!this.isChooseimg[index]);
                var a = 0;
                for(var i = 0; i <=this.isChooseimg.length; i++){
                    if(this.isChooseimg[i]){
                        a = a +1;
                    }
                }
                //this.imgstatus
                this.isChooseimgNum = a;
            },
            pldelphoto(){
                var temp=[]
                for(var i = 0; i <= this.isChooseimg.length; i++){
                    if(this.isChooseimg[i]){
                        temp.push(this.imagearr[i].id)
                    }
                }
                if(temp.length == 0){
                    this.$Message.error("请您先选择照片！");
                    return;
                }
                this.$Modal.confirm({
                    width:"320",
                    content: "<p>确定要删除选中的照片么？</p>",
                    onOk: () => {
                        
                        this.$http.post(global.host+"/cemetery/template/relativesAblum/batchDelete",{"ids":temp.join(',')},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                        if(response.body.status == 1){
                            for(var i = this.imagearr.length; i >= 0; i--){                                  
                                    if(this.isChooseimg[i]){
                                        this.isChooseimg.splice(i,1);                                                     
                                        this.imagearr.splice(i,1);
                                        this.managePhoto=false;
                                    }
                            }
                            this.isChooseimgNum = 0;     
                            this.photoAllchoose = false;                  
                            this.$Message.success(response.body.message);
                            this.queryPhoto(1);
                            this.managePhoto=true;
                        }else{
                            this.$Message.error(response.body.message);
                        }
                        })
                        .catch(function (response) {
                        })
                    },
                    onCancel: () => {

                    }
                });
                
            },
            photoAllchoosefun(){
                if(this.photoAllchoose){
                    for(var i = 0; i < this.imagearr.length; i++){
                        this.isChooseimg[i]=true;
                    }
                    this.isChooseimgNum = this.imagearr.length; 
                }else{
                    for(var i = 0; i < this.imagearr.length; i++){
                        this.isChooseimg[i]=false;
                    }
                    this.isChooseimgNum = 0;     
                }
            },
            ChooseVideo(index){
                this.$set(this.isChoosevideo,index,!this.isChoosevideo[index]);
                var a = 0;
                for(var i = 0; i <=this.isChoosevideo.length; i++){
                    if(this.isChoosevideo[i]){
                        a = a +1;
                    }
                }
                this.isChoosevideoNum = a;
            },
            videoAllchoosefun(){
                if(this.videoAllchoose){
                    for(var i = 0; i < this.spdata.length; i++){
                        this.isChoosevideo[i]=true;
                    }
                    this.isChoosevideoNum = this.spdata.length; 
                }else{
                    for(var i = 0; i < this.spdata.length; i++){
                        this.isChoosevideo[i]=false;
                    }
                    this.isChoosevideoNum = 0;     
                }
            },
            pldeleteVideo(){
                var temp=[]
                for(var i = 0; i <= this.isChoosevideo.length; i++){
                    if(this.isChoosevideo[i]){
                        temp.push(this.spdata[i].id)
                    }
                }
                if(temp.length == 0){
                    this.$Message.error("请您先选择视频！");
                    return;
                }
                this.$Modal.confirm({
                    width:"320",
                    content: "<p>确定要删除选中的视频么？</p>",
                    onOk: () => {
                        this.$http.post(global.host+"/video/material/useBatchDel",{"ids":temp.join(',')},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                        .then((response) => {
                            if(response.body.status == 1){
                                for(var i = this.spdata.length; i >= 0; i--){                                  
                                        if(this.isChoosevideo[i]){
                                            this.isChoosevideo.splice(i,1);                                                     
                                            // this.imagearr.splice(i,1);
                                            this.manageVideo=false;
                                        }
                                }
                                this.isChoosevideoNum = 0;     
                                this.videoAllchoose = false;                  
                                this.$Message.success(response.body.message);
                                this.queryVideo();
                                //this.queryPhoto(1);
                                this.manageVideo=true;
                                
                            }else{
                                this.$Message.error(response.body.message);
                            }
                        })
                        .catch(function (response) {
                        })
                    },
                    onCancel: () => {

                    }
                });
            },
            maxlengthdiv(ev,num){
                if(ev.target.innerText.length>num){
                    ev.target.innerText = ev.target.innerText.substr(0,num);
                }
            },
            templacedrag(vue){ //模块拖拽
                if(this.headerstyle[vue.oldIndex].type=="5"||this.headerstyle[vue.newIndex].type=="6"||this.headerstyle[vue.newIndex].type=="5"||this.headerstyle[vue.oldIndex].type=="6"){
                    this.a=false;
                }
                var ids="";
                var indexs="";
                for(var i=0;i<this.headerstyle.length;i++){
                    ids+=this.headerstyle[i].moduleId+",";
                    indexs+=i+",";
                }
                ids=ids.substr(0,ids.length-1);
                indexs=indexs.substr(0,indexs.length-1);
                this.$http.post(global.host+"/common/template/module/sort",{"moduleId":ids,"index":indexs},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    this.deltemplaceindex=vue.newIndex;
                    this.a=true;
                    
                })
                .catch(function (response) {
                })
            },
            templacedrag2(vue){//图片素材库拖拽
                console.log(vue);
                var ids="";
                var indexs="";
                for(var i=0;i<this.myimagearr.length;i++){
                    ids+=this.myimagearr[i].id+",";
                    indexs+=i+",";
                }
                ids=ids.substr(0,ids.length-1);
                indexs=indexs.substr(0,indexs.length-1);

                this.$http.post(global.host+"/common/template/module/sort",{"id":ids,"index":indexs},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    // if(vue.oldIndex == this.chooseLeftIndex){
                    //     this.chooseLeftIndex = vue.newIndex;
                    // }
                })
                .catch(function (response) {
                })
            },
            fourFn(style,obj){
                
                this.tongyongflag=!obj;
                var this_=this;
                for(var i=0;i<this_.headerstyle.length;i++){
                    if(this_.headerstyle[i].type==3){//照片集
                        this_.headerstyle[i].moduleTitleStyle.color=style.fzbt;//标题字体颜色
                        this_.headerstyle[i].nameStyle.backgroundImage=style.fzbg;//标题背景图片
                        this_.headerstyle[i].nameStyle.backgroundColor=style.bgbt;//标题背景颜色
                        this_.headerstyle[i].headerStyle.backgroundColor=style.bgmk;//模块背景颜色
                        this_.headerstyle[i].moduleContentStyle.color=style.fzmk;//模块内容字体颜色
                    }
                    if(this_.headerstyle[i].type==4){//人生旅途
                        this_.headerstyle[i].moduleTitleStyle.color=style.fzbt;//标题字体颜色
                        this_.headerstyle[i].nameStyle.backgroundImage=style.fzbg;//标题背景图片
                        this_.headerstyle[i].nameStyle.backgroundColor=style.bgbt;//标题背景颜色
                        this_.headerstyle[i].headerStyle.backgroundColor=style.bgmk;//模块背景颜色
                        this_.headerstyle[i].moduleContentStyle.color=style.fzmk;//模块内容字体颜色
                        this_.headerstyle[i].moduleSwiperPStyle.color=style.fzmk;//模块内容字体颜色
                    }
                    if(this_.headerstyle[i].type==5){//视频
                        this_.headerstyle[i].moduleTitleStyle.color=style.fzbt;//标题字体颜色
                        this_.headerstyle[i].nameStyle.backgroundImage=style.fzbg;//标题背景图片
                        this_.headerstyle[i].nameStyle.backgroundColor=style.bgbt;//标题背景颜色
                        this_.headerstyle[i].headerStyle.backgroundColor=style.bgmk;//模块背景颜色
                        this_.headerstyle[i].moduleSwiperPStyle.color=style.fzmk;//模块内容字体颜色
                    }
                    if(this_.headerstyle[i].type==6){
                        
                        this_.headerstyle[i].moduleTitleStyle.color=style.fzbt;//标题字体颜色
                        this_.headerstyle[i].nameStyle.backgroundImage=style.fzbg;//标题背景图片
                        this_.headerstyle[i].nameStyle.backgroundColor=style.bgbt;//标题背景颜色
                        this_.headerstyle[i].headerStyle.backgroundColor=style.bgmk;//模块背景颜色
                        this_.headerstyle[i].moduleSwiperPStyle.color=style.fzmk;//模块内容字体颜色                                                
                    }
                }
                this.tongyongflag=obj;
            },
            biaotifn(value){
                this.topClass = "topP";
                this.topClass2 = "topP";
                this.topClass3 = "topP on";
                this.topClass4 = "topP";
                this.btCurrent=parseInt(value)
                this.biaotiflag=true;
                this.photoModal=true;
                this.imgRecentlyUseFlag = false;
                this.cloudphotoRight = false;
                this.photoRight = false;
                this.isMyChooseImg=[];
                this.imgdialogflag=true;
                this.$http.get(global.host+"/picture/material/query?startPage="+value+"&category=2",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    this.btbglist=response.body.result;
                    this.biaotifnTotal = response.body.total;
                })
                .catch(function (response) {

                })
            },
            imgRecentlyUseFn(){//图片最近使用
                this.topClass = "topP";
                this.topClass2 = "topP";
                this.topClass3 = "topP";
                this.topClass4 = "topP on";
                this.biaotiflag=false;
                this.cloudphotoRight=false;
                this.photoRight=false;
                this.photoModal=true;
                this.imgRecentlyUseFlag = true;
                this.isMyChooseImg=[];
                this.imgdialogflag=true;
                this.imglocation=eval('(' + localStorage.getItem(this.accountId+"1") + ')') || [];
            },
            spRecentlyUseFn(){
                this.topClass = "topP";
                this.topClass1 = "topP on";
                this.spRight=false;
                this.spdialogflag=true;
                
                this.$http.get(global.host+"/video/material/videoTemp",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    if(response.body.status == 1){
                        this.splocation = response.body.result;
                    }else{
                        this.$Messgae.error(response.body.message);
                    }
                })
                .catch(function (response) {

                })

                //this.splocation=eval('(' + localStorage.getItem(this.accountId+"2") + ')') || [];
            },
            bgimgFn(url){
                var this_=this;
                this.$set(this_.stylefour,"fzbg",'url('+this_.imgurl+url+')')  //直接改变数据不行，只有这样解决。
                this.photoModal=false;
                this.fourFn(this_.stylefour,true);
            },
            closefourFn(obj){
                this.tongyongflag=obj
            },
            fourstyleemitFn(style,obj){
                var this_=this;
                var a=style.nameStyleBackgroundImage?require(this_.imgurl+style.nameStyleBackgroundImage):'';
                this_.stylefour={
                    "fzbt":style.moduleTitleStyleColor,//标题字体颜色
                    "fzbg":a,//标题背景图片
                    "bgbt":style.nameStyleBackgroundColor,//标题背景颜色
                    "bgmk":style.headerStyleBackgroundColor,//模块背景颜色
                    "fzmk":style.moduleContentStyleColor//模块内容字体颜色
                }
                this.fourFn(this_.stylefour,obj);
            },
            canCelSetText(){//横向文本设置框
                //关闭里面所有的下拉框
                this.alginflag=false;
                this.lhflag=false;
                this.learflag=false;
                this.textboxBg=false;
            },
            managePhotoStart(){//开始照片管理
                this.managePhoto = true; 
                this.queryPhoto(this.managePhotoPage);
            },
            managePhotoOver(){//照片集完成管理
                this.managePhoto = false;
                this.queryPhoto(this.managePhotoPage);                
            },
            queryPhoto(value){//查询图片
                this.photoAllchoose = false;
                this.isChooseimgNum = 0;  
                this.managePhotoPage = value;
                this.imageCurrent = parseInt(value);
                this.$http.get(global.host+"/cemetery/template/relativesAblum/query/module?cemeteryId="+this.$route.query.mid+"&moduleId="+this.mkid+"&startPage="+value+"&pageSize=20",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    this.imagearrtotal = response.body.total;                    
                    if(response.body.total == 0){
                        this.managePhoto = false;
                    }else{
                        this.imagearr = response.body.result;                    
                        this.savedate.photos=response.body.result;
                        this.imagearrclone=Object.assign({},this.imagearr)
                        this.imgstatusFN(value,this.imagearr);
                    }
                })
                .catch(function (response) {

                })
            },
            queryWorks(page){//查询作品集
                this.workDataPage = parseInt(page);
                this.$http.get(global.host+"/cemetery/template/works/pagingQuery?cemeteryId="+this.$route.query.mid+"&moduleId="+this.mkid+"&startPage="+page+"&pageSize=9")
                .then((response) => {
                    if(response.body.status == 1){
                        this.workDataTotal = response.body.total;
                        this.savedate.works=response.body.result;
                        console.log(this.workDataTotal);
                        this.zpdata=response.body.result;
                    }else{
                        this.$Message.error(response.body.message);
                    }
                    // _this.headerstyle[swiper.container[0].getAttribute("attr")].works.push.apply(_this.headerstyle[swiper.container[0].getAttribute("attr")].works,response.body.result)
                    
                })
                .catch(function (response) {

                })

            },
            imgstatusFN(obj,data){//图片当前选中判断
                var this_=this;
                this_.imgstatus[obj]=[];
                for(var i = 0; i < data.length; i++){
                    this_.imgstatus[obj].push(false);
                }
                this_.isChooseimg=this_.imgstatus[obj];
                //this.isChooseimg[i]=3
            },
            hiddentextdialogFn(){
                this.breviarytext=false;
            },
            queryVideo(){
                this.$http.get(global.host+"/cemetery/template/video/query?cemeteryId="+this.$route.query.mid+"&moduleId="+this.mkid+"&startPage="+1+"&pageSize=30",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    this.spdata = response.body.result;
                    this.spdataClone=Object.assign({},this.spdata);
                    this.savedate.videos=this.spdata
                    if(this.spdata.length == 0){
                        this.manageVideo =false;
                    }
                })
                .catch(function (response) {

                })
            },
            changeNameClick(index,id,name){
                this.changeModoName = true;                
                this.changeModoId = id;
                this.changeModoInput = name;
                this.changeModoIndex = index;
            },
            changeModoNameFun(){//修改模块名称确定方法
                this.$http.post(global.host+"/common/template/name/modify",{"moduleId":this.changeModoId,"moduleName":this.changeModoInput},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {
                    if(response.body.status == 1){
                        this.$Message.success(response.body.message);
                        this.headerstyle[this.changeModoIndex].moduleTitle = this.changeModoInput;
                        this.changeModoName = false;
                    }else{
                        this.$Message.error(response.body.message);
                    }
                })
                .catch(function (response) {
                
                })
            },
            gototemplateList(){//查看所有模板跳转页面
                this.$router.push({ path: '/templateList' ,query:{"s":this.cemeteryId,"isChoose":this.$route.query.nid}});//跳转传记页面 
            },
            birthdayTime3(time){   //    
                function add0(m) {
					return m < 10 ? '0' + m : m
				}
				var time = new Date(parseInt(time));
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				if(this.customized == 1){//判断是否需要中文
					y = this.Arabia(y);				
					m = this.Arabia2(m);				
					d = this.Arabia2(d);	
					this.birthDayAnd = " 至 ";
				    return y + '年' + add0(m) + '月' + add0(d) + '日';                    
				}else{
					// if(a){
                        this.birthDayAnd = " - ";
				        return y + '-' + add0(m) + '-' + add0(d) + '';
                        //a=time.join("-");          //先注释
                        //return a;
                    // }
                }
            },
            birthdayTime2(time){                
                if(this.customized == 1){
                    var a = time[0].split("-");
                    var b = time[1].split("-");
                    var y1 = this.Arabia(a[0]);
                    var m1 = this.Arabia2(a[1]);
                    var d1 = this.Arabia2(a[2]);
                    var y2 = this.Arabia(b[0]);
                    var m2 = this.Arabia2(b[1]);
                    var d2 = this.Arabia2(b[2]);
                    return y1 + '年' + m1 + '月' + d1 + '日' + ' 至 ' + y2 + '年' + m2 + '月' + d2 + '日'
                }else{
                    // if(a){
                        a=new Date(time).toLocaleDateString()         //先注释
                        return a;
                    // }
                    
                }            
            },
            Arabia(Num){
				for (var i = Num.length - 1; i >= 0; i--) {
					Num = Num.replace(",", "")//替换Num中的“,”
					Num = Num.replace(" ", "")//替换Num中的空格
				}    
				//字符处理完毕后开始转换，采用前后两部分分别转换
				var part = String(Num).split(".");
				var newchar = "";
				//小数点前进行转化
				for (i = part[0].length - 1; i >= 0; i--) {
					var tmpnewchar = ""
					var perchar = part[0].charAt(i);
					switch (perchar) {
						case "0":  tmpnewchar = "零" + tmpnewchar;break;
						case "1": tmpnewchar = "一" + tmpnewchar; break;
						case "2": tmpnewchar = "二" + tmpnewchar; break;
						case "3": tmpnewchar = "三" + tmpnewchar; break;
						case "4": tmpnewchar = "四" + tmpnewchar; break;
						case "5": tmpnewchar = "五" + tmpnewchar; break;
						case "6": tmpnewchar = "六" + tmpnewchar; break;
						case "7": tmpnewchar = "七" + tmpnewchar; break;
						case "8": tmpnewchar = "八" + tmpnewchar; break;
						case "9": tmpnewchar = "九" + tmpnewchar; break;
					}
					newchar = tmpnewchar + newchar;
				}   
				return newchar;
			},
			Arabia2(Num){				
				for (var　i = Num.length - 1; i >= 0; i--) {
						Num = Num.replace(",", "")//替换Num中的“,”
						Num = Num.replace(" ", "")//替换Num中的空格
				}    
				//字符处理完毕后开始转换，采用前后两部分分别转换
				var part = String(Num).split(".");
				var newchar = "";
				//小数点前进行转化
				for (var i = part[0].length - 1; i >= 0; i--) {
					var tmpnewchar = ""
					var perchar = part[0].charAt(i);
					switch (perchar) {
						// case "0":  tmpnewchar = "零" + tmpnewchar;break;
						case "1": tmpnewchar = "一" + tmpnewchar; break;
						case "2": tmpnewchar = "二" + tmpnewchar; break;
						case "3": tmpnewchar = "三" + tmpnewchar; break;
						case "4": tmpnewchar = "四" + tmpnewchar; break;
						case "5": tmpnewchar = "五" + tmpnewchar; break;
						case "6": tmpnewchar = "六" + tmpnewchar; break;
						case "7": tmpnewchar = "七" + tmpnewchar; break;
						case "8": tmpnewchar = "八" + tmpnewchar; break;
						case "9": tmpnewchar = "九" + tmpnewchar; break;
					}
					switch (part[0].length - i - 1) {
						case 0: tmpnewchar = tmpnewchar; break;
						case 1: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
						case 2: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
						case 3: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
						case 4: tmpnewchar = tmpnewchar + "万"; break;
						case 5: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
						case 6: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
						case 7: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
						case 8: tmpnewchar = tmpnewchar + "亿"; break;
						case 9: tmpnewchar = tmpnewchar + "十"; break;
					}
					newchar = tmpnewchar + newchar;
				}   
				//替换所有无用汉字，直到没有此类无用的数字为止
				while (newchar.search("零零") != -1 || newchar.search("零亿") != -1 || newchar.search("亿万") != -1 || newchar.search("零万") != -1) {
					newchar = newchar.replace("零亿", "亿");
					newchar = newchar.replace("亿万", "亿");
					newchar = newchar.replace("零万", "万");
					newchar = newchar.replace("零零", "零");      
				}
				//替换以“一十”开头的，为“十”
				if (newchar.indexOf("一十") == 0) {
					newchar = newchar.substr(1);
				}
				//替换以“零”结尾的，为
				if (newchar.lastIndexOf("零") == newchar.length - 1) {
					newchar = newchar.substr(0, newchar.length - 1);
				}
				return newchar;
            },
            latelyUse(type,obj){//type 1图片,2视频,3音乐,最近使用
                var json=obj;
                var this_=this;
                if(type==1){
                    this_.imglocation=eval('(' + localStorage.getItem(this_.accountId+"1") + ')') || []
                    
                    if(this_.removalFn(json.id,this_.imglocation)){
                        console.log("重复")
                    }
                    else{
                        this_.imglocation.unshift(json)
                    }
                    if(this_.imglocation.length>30){
                        this_.imglocation.length=30
                    }
                    localStorage.setItem(this_.accountId+"1", JSON.stringify(this_.imglocation))
                }
                else if(type==2){
                    this_.splocation=eval('(' + localStorage.getItem(this_.accountId+"2") + ')') || []
                    if(this_.removalFn(json.id,this_.splocation)){
                        console.log("重复")
                    }
                    else{
                        this_.splocation.unshift(json)
                    }
                    if(this_.splocation>12){
                        this_.splocation.length=12
                    }
                    localStorage.setItem(this_.accountId+"2", JSON.stringify(this_.splocation))
                }
                else if(type==3){
                    this_.musiclocalStorage=eval('(' + localStorage.getItem(this_.accountId+"3") + ')') || []
                    if(this_.removalFn(json.id,this_.musiclocalStorage)){
                        console.log("重复")
                    }
                    else{
                        this_.musiclocalStorage.unshift(json)
                    }
                    if(this_.splocation>8){
                        this_.splocation.length=8
                    }
                    localStorage.setItem(this_.accountId+"3", JSON.stringify(this_.musiclocalStorage))
                }
            },
            removalFn(id,arr){
                for(var i=0;i<arr.length;i++){
                    if(id==arr[i].id){
                        var a=arr[i];
                        arr.splice(i, 1);
                        arr.unshift(a);
                        return true;
                    }
                }
            },
            showBackModal(value){//打开意见反馈弹窗
				this.backModal = value;//根据组件传出的参数来修改传入的值
            },
            photoFN(key,val){
                this.headerstyle[key].photos.push.apply(this.headerstyle[key].photos,val)
            },
            openEditCourseFun(value){
                this.openEditCourseFlg = value;
            },
            imgdialogcloseFn(){
                this.imguseindex=[];
            },
            wraphide(){
                window.checkflag="";
                if($(".resize-panel").length=="0"){
                    return;
                }
                $(".resize-panel")[0].style.zIndex=9999;
                $(".resize-panel").hide();
                this.wrapright=false;
            },
            spFn(){
                this.uploadVideoModal=false;
                document.getElementById("inputabc").value=""
            }
		}
    }
</script>
    